Question

我的DOM结构有点像这样：

<div id="main_common_listing_form">
    <form id="frmlist" method='POST'>
....
        <select id="refine_search">
            <option value="noValueSelected" selected="selected">Please select search key</option>
            ....
        </select>
....
    </form>
</div>

我正在用另一个具有相同结构的表单元素通过ajax替换form元素。在替换之后，我试图从具有selected属性的option元素中删除selected属性。我写的javascript是：

$("#main_common_listing_form").on("change", function(){
    $(this).find("#refine_search option[selected='selected']").removeAttr("selected");
})

这在替换表单元素之前工作正常，但是在替换表单元素之后，这不是必需的。任何人都可以帮我解决这个问题吗？提前致谢。

Answer 1

尝试这样的事情

    $(document).on("change","#main_common_listing_form", function(){
        $(this).find("#refine_search option[selected='selected']").removeAttr("selected");
    })

原因：您在被新的元素替换的元素上应用了事件。所以新元素没有附加事件。

因此请使用delegate附加活动。所以你新创建的元素会将该事件附加到它

jQuery委托说明

根据一组特定的根元素，为现在或将来与选择器匹配的所有元素的一个或多个事件附加一个处理程序。

当DOM加载AJAX时，Jquery .removeattr（）工作问题

1 个答案: