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

Question

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

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have 3 inline-block Divs in a 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 within 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 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 do not understand the reason for this behavior. I'm not much into Javascript, and any help was appreciated.

javascript front-end

asked by anonymous 06.07.2017 / 13:44

2 answers

Why does my Database (null) return null when I search for id? Configure Template (ready) in Laravel 5.x

score 1 · Answer 1

Maybe it's because it's doing wrong in fc's call, $ (document) .ready is equivalent to window.onload, so it's fine to stay like this

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

and your anchor href="#" because in the script load will already associate .reset with the script click

score 1 · Answer 2

You can, and in my opinion: should, add all the scripts within a single read document read function. I do not see the need to listen to several identical events or to look up the code in several 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 class of the object, it is not necessary to call a function to trigger (as you do here href="javascript:mor()" , which is why you need to double click to dispense 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, it will fire when clicking, do you understand?

Then define everything for your class or id, or set everything onclick, but using the two and in that order, there is no other way to do it, than to double-click: one that defines the listener and the other that triggers the event.