传递元素Html从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); 
});