要素を渡して、onclickから関数を呼び出す

Question

コードから要素を作成し、onclick、要素にパラメータとして追加したいと考えています。私はこの試みた：my fiddle

$(document).ready(function(){ 
 
    elementToPass = $('.aaa').children()[0]; 
 
    var element = '<div class="ccc" onclick="myFun(' + elementToPass + ')">ccc</div>'; 
 
    $('.aaa').append(element); 
 
}); 
 
    
 
myFun = function(){ 
 
    console.log('its working'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<div class="aaa"> 
 
    <div class="bbb"> 
 
     bbb 
 
    </div> 
 
</div>

を、それはエラーを発生させ、コード内のイベントハンドラの割り当て/

Answer 1

予告要素自体と変数の違いは

つまり、実行していない文字列に変換されている：'some text' + elementToPass + 'remaining text' 理由elementToPassは、目的のオブジェクトではなく文字列になります

$(document).ready(function(){ 
 
    var elementToPass = $('.aaa').children()[0]; 
 
    var element = '<div class="ccc" onclick="myFun()">ccc</div>'; 
 
    $('.aaa').append(element); 
 

 
    myFun = function(){ 
 
     console.log('its working: ' + elementToPass); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<div class="aaa"> 
 
    <div class="bbb"> 
 
     bbb 
 
    </div> 
 
</div>

Answer 2

はインラインイベントハンドラを割り当てるよりもはるかに優れています。この特定のインスタンスでは、インラインハンドラ内の参照をハードコードしようとするのではなく、その要素を関数に動的に渡すことができます。他の文字列に連結しながら、これまで

変更それを...

$(document).ready(function(){ 
    elementToPass = $('.aaa').children()[0]; 
    var element = '<div class="ccc">ccc</div>'; 

    element.onclick = function() { 
     myFun(elementToPass); 
    } 

    $('.aaa').append(element); 
});