Jquery在使用ajax加载DOM中删除后仍然会触发

Question

我正在使用Laravel 5.2开发我的单页应用程序。我有add.blade.php，并有脚本和edit.blade.php具有相同的脚本，相同的类名和ID。当我.load add.blade.php脚本工作正常。然后动态地.load edit.blade.php，此时add.blade.php在DOM及其脚本中被删除。但是它的脚本仍然不是我edit.blade.php中的那个。

顺便说一下，我的活动已委派。谢谢。

Answer 1

我想你会期望jQuery代码在删除/替换包装<script>标记后失去效果。但是这种方式不起作用。

考虑下面的例子：

#script-wrapper{padding-left: 15px; border: solid 1px black; background-color: gold}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div id="script-wrapper"> 
 
    <h3> Script wrapper</h3> 
 
    <p>foo() is defined in here</p> 
 
    <script type="text/javascript"> 
 
    function foo() { 
 
     alert("Foo"); 
 
    } 
 
    </script> 
 
</div> 
 

 
<hr /> 
 

 
<input type="button" id="runFoo" value="Run foo()" /> 
 
<input type="button" id="removeScript" value="Remove script wrapper" /> 
 

 
<script type="text/javascript"> 
 
    jQuery("#runFoo").click(function() { 
 
    foo(); 
 
    }); 
 

 
    jQuery("#removeScript").click(function() { 
 
    jQuery("#script-wrapper").remove(); 
 
    }); 
 
</script>

在上面的例子中，我们有#script-wrapper元件内定义的函数foo()。您可以使用按钮运行此功能，或者使用另一个按钮删除#script-wrapper。在这里您可以注意到，即使从DOM中删除了#script-wrapper，该功能也可以被触发。

如果您想结束当前的功能，您可以手动“取消定义”它。从示例中删除#script-wrapper将不会为您执行“未定义”。

foo = void(0); //this will set foo to undefined