【问题标题】:Jquery id selector variable cannot bind to onchangeJquery id 选择器变量无法绑定到 onchange
【发布时间】:2012-06-22 23:29:02
【问题描述】:

我在表单中有输入区域列表,ID 为“contact1_title”、“contact2_title”、“contact3_title” ....

而且我在这个表单中也有一个选择列表,ID 像“contact1_name”、“contact2_name”、“contact2_name”......

我想编写一个循环来为选择动态绑定 onchange 函数。

这是我的代码:

for(var j=1;j<6;j++){                        
                    $('#contact'+j+'_name').change(function() {
                        alert(j);
                        //json.engineer is a json object
                        $('#contact'+j+'_title').val( json.engineer[this.selectedIndex-1].title );
                    });
}

当我更改选择时,它总是提示 6。

并且标题输入区域不能通过选择来改变。

这是否意味着javascript中的变量总是改变?

如何动态绑定动作?

我可以使用 "this.name.split("_")[0]" 破解它,但代码看起来很难看。

提前致谢。

【问题讨论】:

标签: javascript jquery variables dynamic jquery-selectors


【解决方案1】:

通过闭包包装您的 change 功能:

for(var j=1;j<6;j++){     
    (function(j){                   
         $('#contact'+j+'_name').change(function() {
             alert(j);
             //json.engineer is a json object
             $('#contact'+j+'_title').val( json.engineer[this.selectedIndex-1].title );
         });
     })(j);
}

问题是,当你点击时,你的循环已经结束,所以j 等于6

【讨论】:

  • 事件处理程序已经是一个闭包。更正确的解释是:“使用立即执行的函数表达式来创建新范围”(或类似的东西)。
  • @FelixKling 我的新解释怎么样?
【解决方案2】:

另一种解决方案是将计数器作为事件数据传递:

for(var j=1;j<6;j++){                        
    $('#contact'+j+'_name').change({index: j}, function(event) {
        $('#contact' + event.data.index + '_title')
           .val(json.engineer[this.selectedIndex-1].title );
    });
}

如果您可以避免使用for 循环,那就更好了,但这取决于您的标记以及您是否可以控制创建的元素,因为您可能必须调整它们才能这样做。

【讨论】:

  • 你改变了 event.data.indexj :)
【解决方案3】:

已经有闭包了,好好利用吧。

for(var j=1;j<6;j++){                        
     $('#contact'+j+'_name').change(function() {
     var k=j;
     alert(k);
     //json.engineer is a json object
     $('#contact'+k+'_title').val( json.engineer[this.selectedIndex-1].title );
     });
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-04-17
    • 1970-01-01
    • 1970-01-01
    • 2012-04-11
    • 2011-05-06
    • 1970-01-01
    • 2016-09-10
    相关资源
    最近更新 更多