追加后，點擊事件不起作用

Question

我想動態點擊段落的第一個點擊，但它不起作用。

 $(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小提琴

Answer 1

您需要在委派后觸發click() ，只需更改行的順序即可：

 $(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> 

Answer 2

 $(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> 

Answer 3

您所做的一切都正確，除了一件事情-您在單擊本身之后聲明第二次單擊的事件處理程序。 因此，觸發第二次單擊時，您尚未聲明處理程序，也看不到任何警報。 我在下面重新排列了它。 嘗試運行以下代碼段。

 $(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>