2016-11-04 13 views
0

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

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

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

+0

エラーは何ですか? – Samir

答えて

0

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

つまり、実行していない文字列に変換されている:'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>

0

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

変更それを...

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

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

    $('.aaa').append(element); 
}); 
関連する問題