Script via Link requires double click the first time it is requested

Question

I’ve got three inline-block divs on an Row. These Divs contain 1 text paragraph with a link at the end to extend the div and print the remaining paragraphs. At the end of the extended div, there is another link that returns the div to its normal state. To achieve this, I use the following scripts:

<script type="text/javascript" charset="utf-8">
  function mor() {
    $(document).ready(function () {
        $('.more').click(function () {
            $('#' + $(this).attr('id')).load('content-box_en.phtml #' + $(this).attr('id') + '-p');
            return false;
        });

    });
 }
</script>
<script type="text/javascript" charset="utf-8">
  function res() {
      $(document).ready(function(){
          $('.reset').click(function(){
              $('#'+$(this).attr('id')).load('reset_en.phtml #' + $(this).attr('id')+'-p');
            return false;
        });
    });
}
</script>

The Divs link looks like this:

<p>Mobile sales System – Mobile application for Pre- Sales and Auto sales, distribution and tecnical services. Available to PDA and Tablet.  <a class="more" id="sales" href="javascript:mor()" style="text-decoration: none;">[+]</a></p>

The content inside the file "content-box_en.phtml":

<p id="sales-p"><?= mb_convert_encoding('Mobile sales System – Mobile application for Pre- Sales and Auto sales, distribution and tecnical services. Available to PDA and Tablet.', 'UTF-8') ?></p>
<p id="sales-p"><?= mb_convert_encoding('Mobile sales System – Mobile application for Pre- Sales and Auto sales.', 'UTF-8')?><a class="reset" id="sales" href="javascript:res()" style="text-decoration: none;">[-]</a></p>

This functional, the problem arises when I click on the link for the first time. I have to double click the first time I call the function, but then it works with a single click...

I don’t understand the reason for this behavior.
I’m not really into Javascript, and any help was appreciated.

Answer 1

possibly it is pq is doing wrong in the call of Fc, $(Document). ready is equivalent to window.onload, sure to look like this

$(document).ready(function(){
 function res() {
      $('.reset').click(function(){
          $('#'+$(this).attr('id')).load('reset_en.phtml #' + $(this).attr('id')+'-p');
        return false;
    });
}
 });

and its anchor href="#" because when loading the script it will already associate . reset to the click script

Answer 2

You can, and in my opinion: should, add all scripts within a single read function of the ready document. I don’t see the need to listen to several similar events or search for the code in various places when they should all be in one.

Your JS:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('.more').click(function () {
            $('#' + $(this).attr('id')).load('content-box_en.phtml #' + $(this).attr('id') + '-p');
        });

        $('.reset').click(function(){
              $('#'+$(this).attr('id')).load('reset_en.phtml #' + $(this).attr('id')+'-p');
        });
    });
</script>

Your HTML:

<p>Mobile sales System – Mobile application for Pre- Sales and Auto sales, distribution and tecnical services. Available to PDA and Tablet.  
    <a class="more" id="sales" style="text-decoration: none;">[+]</a>
</p>

As you define the listener according to the object class, it is not necessary to call a function to fire (as you do here href="javascript:mor()", and that is why it is necessary to click twice to dispose of the function effectively. Note that when you define a function, it did not assign the event, since the function was not called. After calling the function in onclick, then yes, there is the listener for the class, now yes, will fire when clicking, understand?

Then set everything for your class or id, or set everything in onclick, but using both and in that order, there’s no other way to go, but to have to click twice: one that defines the listener and the other that triggers the event.