クリックイベントが追加後に機能しない

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 Fiddle

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

あなたは一つのことを除いて、正しいすべてをやっている - あなたは、クリック自体の後に2番目のクリックのイベントハンドラを宣言しています。したがって、2回目のクリックがトリガされると、まだハンドラが宣言されておらず、警告が表示されません。 私はそれを下に並べ替えました。以下のスニペットを実行しようとしています。

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