当我使用.html（）放置数据时，jquery脚本不能在使用.html（）

后工作，但jQuery脚本不适用于新数据。的代码是像这样的：当我使用.html（）放置数据时，jquery脚本不能在使用.html（）

<html> 
<head> 
<script> 
$(document).ready(function(){ 
    $("#newhtml").on("click", function(){ 
     alert("I'm the NEW one!"); 
    }); 
    $("#put_new").on("click", function(){ 
     $("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>"); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="newdiv"></div> 
<input type="button" id="put_new" value="put new html" /> 
</body> 
</html>

这是一个简单的例子，但有更多的数据我想把我希望新的元素，在这样的脚本工作。我试图在stackoverflow.com上搜索，但我没有找到任何适用的。非常感谢。

来源

2013-04-23 Marwan Zakariya

我已经回答了类似的问题。可能会阐明发生了什么/如何避免它：http://stackoverflow.com/questions/12468847/prototype-js-stops-working-after-adding-jquery-replace-other-jquery-works-ju/12480885 ＃12480885 – dontGoPlastic 2013-04-23 14:50:54

谢谢，我会看看:) – 2013-04-24 10:06:02

使用此： - http://jsfiddle.net/FQjUZ/

$("#newdiv").on("click", "#newhtml", function(){ 
     alert("I'm the NEW one!"); 
    }); 
    $("#put_new").on("click", function(){ 
     $("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>"); 
    });

原因是，对于这种功能其中元素在稍后时间加入到DOM，你需要使用委托的事件处理程序，而不仅仅是结合。

事件处理程序仅绑定到当前选定的元素;他们必须在您的代码拨打.on()时在页面上存在。

委托事件有优势，他们可以处理来自被添加到该文件在稍后的时间后代元素的事件。通过选择在委托事件处理程序附加时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序的需要。该元素可以是模型 - 视图 - 控制器设计中的视图的容器元素，例如，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此在不等待文档准备就绪的情况下在其中附加事件是安全的。

来源

2013-04-23 14:51:02 PSL

谢谢，这正是我想要的:) – 2013-04-24 10:04:43

那是因为在执行当前的.on()语句时，元素不存在。

改变你的活动结合：

$(document).on('click', '#newhtml', function(){ 
    alert("I'm the NEW one!"); 
});

主要元素（S）你必须在调用的时候被现有的呼叫on()。在第二个参数中，您可以为绑定时可能不存在的元素指定选择器。

来源

2013-04-23 14:49:37 techfoobar

您在newHtml上的事件将不起作用，因为您在将节点添加到DOM之前附加事件，因此为了使其工作，需要在调用html方法后实现您的事件。

$(document).ready(function(){ 
    $("#put_new").on("click", function(){ 
     $("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>"); 
     $("#newhtml").on("click", function(){ 
      alert("I'm the NEW one!"); 
     }); 
    }); 
});

来源

2013-04-23 14:51:30 misoukrane

尝试类似这样的东西。

var f00 = "doStuff()"; 

$("#newdiv").html('<input type="button" id="newhtml" value="click on me" onclick="' + f00 + '"/>'); 

function doStuff() { 
    //stuff 
}

来源

2013-04-23 15:07:10 Jonathan

当我使用.html（）放置数据时，jquery脚本不能在使用.html（）

回答

相关问题