如果刷新部分DOM,是否会丢失jQuery绑定?
我有以下资料:如果刷新部分DOM,是否会丢失jQuery绑定?,jquery,Jquery,我有以下资料: <script type="text/javascript"> $(document).ready(function () { $("input[id^='Position_'], select[id^='Level_'], input[id^='Title_'], select[id^='Status_'],").change(function (e) { var type = $(this).attr('
<script type="text/javascript">
$(document).ready(function () {
$("input[id^='Position_'], select[id^='Level_'], input[id^='Title_'], select[id^='Status_'],").change(function (e) {
var type = $(this).attr('id').split('_')[0];
updateField('Menu', $(this), type);
});
});
</script>
刷新之后,不会调用函数updateField
这是预期的行为,还是我在其他领域犯了一些错误
还有。我正在使用IE进行调试。有没有一种方法可以让我看到像这样的绑定,其中updateField绑定到元素?我认为虽然
id
s是相同的,但它们仍然是新添加的HTML元素,没有任何事件绑定到它们。因此,这是预期的行为。要将Jquery事件绑定到新添加的元素,请使用或。
PS:
.live()
在Jquery 1.7中被弃用
编辑:在Jquery中绑定事件时使用
.live()
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
$(“p”).live(“单击”,函数(){
$(此)。在(“另一段!”)之后;
});
默认情况下,您将丢失绑定,但有一些技术可以让您在创建新内容时拥有与之关联的绑定。。。
举个例子,当您更改容器的
html()
时,附加到这些元素的所有事件也将被删除
为防止出现这种情况,请在容器上使用delegate()
(或on()
,如果您使用的是1.7+,请检查容器中的元素。不要使用live()
,因为它已被弃用,并且性能较差
<script type="text/javascript">
$(document).ready(function () {
$("#detailData").delegate("input[id^='Position_'], select[id^='Level_'], input[id^='Title_'], select[id^='Status_'],", "change", function (e) {
var type = $(this).attr('id').split('_')[0];
updateField('Menu', $(this), type);
});
});
</script>
$(文档).ready(函数(){
$(“#detailData”).delegate(“输入[id^='Position'],选择[id^='Level'],输入[id^='Title'],选择[id^='Status'],”,“更改”,函数(e){
var type=$(this.attr('id').split('uuz')[0];
updateField('菜单',$(此),类型);
});
});
对不起,我不明白。我应该如何使用这个。我已经绑定到具有相同ID名称的元素。当我用相同名称的元素替换这些元素时,这些都丢失了吗?我使用的是1.7+,所以如果我在上面使用on(),我只是用“on”替换单词delegate吗?@Melissa使用on,它将是$(“#detailData”)。on(“change”,“input[id^='Position'],…”,函数(e){
<script type="text/javascript">
$(document).ready(function () {
$("#detailData").delegate("input[id^='Position_'], select[id^='Level_'], input[id^='Title_'], select[id^='Status_'],", "change", function (e) {
var type = $(this).attr('id').split('_')[0];
updateField('Menu', $(this), type);
});
});
</script>