Question

我不确定，如何以正确的方式使用.click。

我查看了手册（http://api.jquery.com/click/），但找不到我的问题的答案：

我正在使用JS生成一个div结构：

<div>
   <img id='img_1' src="click.gif">
</div>
<div id='content_1'> Text</div>

使用以下功能生成许多块。最后，每个图像都会获得一个点击事件来更改相关文本的css：点击img_1更改内容_上的css。我试试这段代码（简化版）：

$.each(data, function(selector,content) {
     id=prepare(selector);
     $('#boxDiv').append('    <div>\
                               <img id="img_'+id+'" src="click.gif">\
                             </div>\
                             <div id="content_'+id+'"> Text</div>');
     $('#img_'+id).click(function(a) {
                         $('#content_'+id).css('height','100px');});
});

但是这个代码不能像我一样工作。

每个'img_'+id元素都会获得相关的点击事件（到目前为止，所以上帝）但是该函数不会改变相关'content_'+id的css！始终，最后一个内容元素被更改。看起来，.click回调函数在添加click事件时没有获得id，但在执行回调函数时。目前，id（当然）始终是最后一个元素。

所以问题是，如何将当前（相关的）id置于.click -callback函数中？

//更新：我不确定，如果在这种情况下使用live（）可以提供帮助：我试过这个，没有任何成功。问题不在于缺少点击事件。问题是，每次点击时，都会使用最后一个id触发回调函数。例。生成的内容如下所示：

<div>
   <img id='img_1' src="click.gif">
</div>
<div id='content_1'> Text</div>
<div>
   <img id='img_2' src="click.gif">
</div>
<div id='content_2'> Text</div>
<div>
   <img id='img_3' src="click.gif">
</div>
<div id='content_3'> Text</div>

JS代码将一个点击事件绑定到img_1，一个点击事件绑定到img_2，一个点击事件绑定到img_3。我将回调函数的内容更改为：

$('#expand_'+id).live('click',function() {console.info(id);});

我看到ID的内容：点击img_1或img_2 ID为3.可能是因为，3是每个循环的最后一个值。那么如何才能在回拨中获得相关的id？

感谢您提供任何帮助。

Answer 1

发现问题in your fiddle（和您更新的代码）：

您忘记将var放在id前面，这使其成为全球性的。所有事件处理程序引用相同的id，其值是最后一次迭代的值。

将其声明为

var id = ....;

使其成为本地人。

那就是说，我会用jQuery创建所有元素：

$.each(data, function(selector,content) {
     var id = selector;

     var $img = $('<span />', {
         id: 'img_' + id,
         text: 'click'
     }).click(function() {
          $('#content_'+id).css('height','100px');
     });

     var $div = $('<div />', {
         id: 'content_' + id,
         text: 'Text'
     });

     $('<div />').append($img).append($div).appendTo('#boxDiv');
});

还有其他方法可以找到#content_X元素。在您的结构中，此元素始终是图像父级的下一个兄弟。因此，在事件处理程序中搜索具有此ID的元素，您可以执行以下操作：

$(this).parent().next().css(...);

甚至可以将事件处理程序绑定到父div，而不是直接绑定到图像。

Answer 2

你不是说

$.each(data, function(id,content) {
     $('#boxDiv').append('    <div>\
                               <img id="img_'+id+'" src="click.gif">\
                             </div>\
                             <div id="content_'+id+'"> Text</div>');
     $('#img_'+id).click, function(a) {
                         $('#content_'+id).css('height','100px');
     });
});

？在ID

之前有两个缺少＃

Answer 3

click事件处理程序可以访问id（和content）变量，因为它在父函数中定义。在JavaScript中，内部函数可以访问定义它们的函数的所有变量。

问题只是你错过了几个jQuery选择器字符串中的# ID选择器：

$('#boxDiv').append('...');
//some code removed
$('#content_' + id).css('height', '100px');

Answer 4

您应该使用.live回拨function，而不是使用.click回调函数。引用jquery文档：

“说明：为所有与当前选择器匹配的元素添加处理程序，现在和将来。”

试试这个：

$.each(data, function(id,content) {
 $('boxDiv').append('    <div>\
                           <img id="img_'+id+'" src="click.gif">\
                         </div>\
                         <div id="content_'+id+'"> Text</div>');
 $('#img_'+id).live('click', function() {
                     $('content_'+id).css('height','100px');});
});

更改.click（）上的不同元素

4 个答案: