javascript - 动态生成的 HTML，生成的事件与静态脚本

Question

当从服务器生成 HTML 时，例如，通过echoPHP，分配事件是否更好：

<div>
    <input type="button" onclick="Click(123)"/>
</div>

function Click(x)
{
    var id = x;
    //Do Ajax Call
}

或者在 JQuery/JavaScript 中声明事件...

<div id="123">
    <input type="button" class="myButton"/>
</div>


$(".myButton").click(function(){

   //Fetch the ID as well
   var parentID = $(this).parent('div').attr('id');
   //Then do an Ajax Call

});

哪个是最佳实践？

Answer 1

第二种方法更好..因为 web 2.0 标准建议使用不显眼的 JS 而不是 onevent 属性....但是由于元素是动态生成的...您的第二种方法可能不起作用...您需要 io 将您的点击事件委托给最近的静态父使用on

$(document).on('click',".myButton",function(){

  //Fetch the ID as well
  var parentID = $(this).parent('div').attr('id');
 //Then do an Ajax Call

});

阅读更多关于on()事件

Answer 2

是否动态生成 HTML 没有区别。无论哪种方式，您通常都应该更喜欢使用不显眼的 Javascript。

另请参阅：为什么在 HTML 中使用 onClick() 是一种不好的做法？

Answer 3

The second method is better because a) you don't have to edit your HTML code and b) you have better possibility how to handle your events from your JS code.