Question

我正在尝试动态创建div元素，在创建时我正在使用onClick ='showDimension（）;'。它在警告框中显示正确的html，但是当创建DIV时，您可以看到div没有附加任何onClick方法[firebug]。而不是它有一个迷路字符串'showDimension（）;'。为什么会这样？如何解决？ http://jsbin.com/inoqi3/3

另外，你可以看到我正在使用

var eventDe = " onClick='showDimension("+i +");'";

然后，稍后我将用于找出div id。很明显，这是不正确的方法。如何使用event.target或event.srcElement来获取触发事件的div？我试过但无法使用它。

Answer 1

<强>更新

$('#element_id').live('click', function(event){
   var trget = event.target;
});

jQuery具有live()方法，可用于将click事件应用于动态元素。

示例：

$('#element_id').live('click', function(){ // your code... });

Answer 2

你搞砸了引号。有时您使用"，有时使用'。

如果您按照字符串生成HTML的路线，可以使用'在Javascript中构建字符串，并使用"来表示HTML属性。如下所示：

  var style =  [' style="background-color: ' + getRandomColor(),
      'position:absolute;border: thick solid',
      'height: ' + height,
      'width: ' + width,
      'left: ' + left,
      'top: ' + top,
      '" '].join(';');

  var eventDe = 'onclick="showDimension(this);"';
  var innerText = 'DIV:' + i + '<br/> height: ' + height + '<br/>';      
  var html = '<div id="div' + i + '" ' + style + ' ' + eventDe + '>' + 
             innerText + '</div>';

注意事项：

您可以使用+=和Array

join

由于属性不区分大小写

onclick

showDimension(this)，这将为您提供所点击的DIV的参考。

你可以通过以下方式获得：

function showDimension(div){      
  alert($(div).height());   
}

你可以考虑避免所有这些字符串操作的东西是使用javascript模板引擎。我为PURE做出了贡献，但还有很多其他的可用。

Answer 3

为什么不尝试div类名称方法。给div一个类名，这样你就可以有一个单独的点击处理程序

（'。clasname'）。live（click，function（））就像......这个

Answer 4

如果您不想使用jQuery绑定器（live，bind，click），而是使用属性onclick，请确保添加{{1}指示JS调用和javascript:作为事件处理程序的参数，以便您可以访问函数内的event和其他数据::

event.target

我仍然建议使用jQuery。请记住，即使您在JS中生成HTML（例如响应AJAX请求），您仍然可以使用jQuery API执行此操作，并在将事件添加到父项之前将事件附加到新创建的节点（通过{{1 }}）。

为什么我无法绑定div的onClick事件上的方法？

4 个答案: