Question

从服务器生成HTML时，例如，在PHP中通过echo生成HTML，分配事件是否更好：

<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而不是一个属性......但是因为元素是动态生成的......你的第二种方法可能不起作用......你需要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是否是动态生成没有区别。您通常更喜欢以任何方式使用unobtrusive Javascript。

另见：Why is using onClick() in HTML a bad practice?

Answer 3

第二种方法更好，因为a）您不必编辑HTML代码，b）您更有可能从JS代码处理事件。

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

3 个答案: