附加选择的 Change() 不起作用

发布于 2024-12-20 15:16:57 字数 656 浏览 0 评论 0原文

我对选择元素的更改有 jQuery 函数：

$("#category").change(function(){
    $("table[id=advance_search]").append("<tr id='item_type'></tr>");
    $("tr[id=item_type]").append("<td class='field_input'><select id='type'><option value='1'>One<option><option value='2'>Two<option></select></td>");
});

$("tr[id=item_type]").children(".field_input").delegate("select[id=type]", "change", function() {
    console.log("change");
});

当我更改 select#type 上的值时，字符串“change”不会显示在控制台中。谁能帮助我吗？

已编辑，用于添加作为 $("tr[id=item_type]") 的子级

原文

I've jQuery function on change for a select element:

$("#category").change(function(){
    $("table[id=advance_search]").append("<tr id='item_type'></tr>");
    $("tr[id=item_type]").append("<td class='field_input'><select id='type'><option value='1'>One<option><option value='2'>Two<option></select></td>");
});

$("tr[id=item_type]").children(".field_input").delegate("select[id=type]", "change", function() {
    console.log("change");
});

When I change value on select#type, string "change" doesn't show in console.
Can anyone help me?

Edited, for adding <td class='field_input'> as children of $("tr[id=item_type]")

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盗梦空间 2024-12-27 15:16:57

这里的问题是因为 change() （以及所有其他事件处理程序快捷方式）在页面加载时绑定，但您的元素是在此之后动态添加的。相反，您需要在附加事件后使用 delegate() 将事件附加到该元素。

$("tr[id=item_type]").delegate("select[id=type]", "change", function() {
    console.log("change");
});

或者，如果您使用的是 jQuery 1.7+，您可以使用 on()：

$("tr[id=item_type]").on("change", "select[id=type]", function() {
    console.log("change");
});

您可能想要修改您在此处附加的 select 元素，因为它有一个ID，如果多次附加，很容易重复，从而导致页面无效。

The problem here is because change() (and all other event handler shortcuts) are bound on page load, yet your element is added dynamically well after this. Instead you need to use delegate() to attach the events to this element after it's appended.

$("tr[id=item_type]").delegate("select[id=type]", "change", function() {
    console.log("change");
});

Or, if you're using jQuery 1.7+ you can use on():

$("tr[id=item_type]").on("change", "select[id=type]", function() {
    console.log("change");
});

You may want to amend the select element you're appending here though, as it has an ID, which could be easily duplicated if it's appended multiple times, which would render the page invalid.

回复收藏 0 原文

×眷恋的温暖 2024-12-27 15:16:57

您需要使用 on() 函数进行订阅，因为当您订阅时DOM 中不存在 change 元素，jQuery 无法找到它。

$("select[id=type]").on('change', function(){
     console.log("change");
});

You need to subscribe with on() function, because when you subscribong with change element doesn't exists in DOM and jQuery can't find it.

$("select[id=type]").on('change', function(){
     console.log("change");
});

回复收藏 0 原文

江南烟雨〆相思醉 2024-12-27 15:16:57

因为您动态添加它，所以必须使用 live 或 delegate 事件

$("select#type").live('change', function() {
    console.log('change');
});

because you add it dynamicly you have to use the live or delegate event

$("select#type").live('change', function() {
    console.log('change');
});

回复收藏 0 原文

过潦 2024-12-27 15:16:57

试试这个：

$("select[id=type]").on("change",function(){
    console.log("change");
});

从 jQuery 1.7 开始，.live() 方法已被弃用。使用 .on() 来
附加事件处理程序。旧版本 jQuery 的用户应该使用
.delegate() 优先于 .live()。

来源：http://api.jquery.com/live/

try this:

$("select[id=type]").on("change",function(){
    console.log("change");
});

As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().

source:http://api.jquery.com/live/

回复收藏 0 原文

~没有更多了~