Click event doesn't work after append

Question

I want to dynamic click on first click of paragraph but its not working.

$(document).ready(function() {
  $(".newclass").click(function() {
    var append_code = '<a href="google.com" class="hrefclick">Youre clicked</a>';
    $('body').append(append_code);
    $(".hrefclick").click();

    $(document).on('click', '.hrefclick', function(e) {
      alert("yess! You're clicked");
      // do whatever
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="newclass">
  Hit me!
</p>

js Fiddle

Your code, which works fine, seems completely unrelated to the title which itself is unrelated to the description. What exactly are you trying to do here? — Rory McCrossan
– Rory McCrossan, Commented Mar 29, 2017 at 14:55
i want the alert to be called in just a single click not 2 clicks — Rushil K. Pachchigar
– Rushil K. Pachchigar, Commented Mar 29, 2017 at 14:56
So remove the inner on() event handler for the .hrefclick element — Rory McCrossan
– Rory McCrossan, Commented Mar 29, 2017 at 14:57
Uncaught TypeError: $(...).hrefclick is not a function getting error — Rushil K. Pachchigar
– Rushil K. Pachchigar, Commented Mar 29, 2017 at 14:57

DaniP · Accepted Answer · 2017-03-29 14:59:22Z

4

You need to trigger the click() after the delegation, just change the order of your lines:

$(document).ready(function() {
  $(".newclass").click(function() {
    var append_code = '<a href="google.com" class="hrefclick">Youre clicked</a>';
    $('body').append(append_code);

    $(document).on('click', '.hrefclick', function(e) {
      alert("yess! You're clicked");
      // do whatever
    });
    $(".hrefclick").click();
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="newclass">
  Hit me!
</p>

answered Mar 29, 2017 at 14:59

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DaniP Over a year ago

Glad to help U @RushilPachchigar

Rafael Umbelino · Accepted Answer · 2017-03-29 15:00:39Z

$(document).ready(function() {
  $(".newclass").click(function() {
    var append_code = '<a href="google.com" class="hrefclick">Youre clicked</a>';
    $('body').append(append_code);
    $(".hrefclick").click();

    $(document).on('click', '.hrefclick', function(e) {
      alert("yess! You're clicked");
      // do whatever
    });
    $('.hrefclick').trigger('click');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="newclass">
  Hit me!
</p>

mp77 · Accepted Answer · 2017-03-29 15:02:13Z

You are doing everything correct except one thing - You are declaring event handler of your second click after the click itself. So, when second click is triggered, you don't have handler declared yet and you don't see any alert. I rearranged it below. Trying running the below snippet.

$(document).ready(function() {
  $(".newclass").click(function() {
    var append_code = '<a href="google.com" class="hrefclick">Youre clicked</a>';
    $('body').append(append_code);
      
      //on click event handler should be declared first before clicking
     $(document).on('click', '.hrefclick', function(e) {
      alert("yess! You're clicked");
      // do whatever
    });
    
    $(".hrefclick").click();

   
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="newclass">
  Hit me!
</p>

Collectives™ on Stack Overflow

Click event doesn't work after append

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related