.click（）jquery不工作
我在.click（）jquery不工作,jquery,events,click,Jquery,Events,Click,我在方面遇到了一些问题。单击（）。我不明白为什么 所以问题是我的.ready（）函数中有.click（）。第一次就可以了。我还得到了一个脚本，重写了链接（我试图克隆的东西）。因此，当发生这种情况时，.click（）停止工作 代码如下： $(document).ready(function() { $div = $('.period:first'); clearClones(); cloneDiv($div,$('#num_periods').val()); $('
方面遇到了一些问题。单击（）.ready（）.click（）.click（）$(document).ready(function() {
$div = $('.period:first');
clearClones();
cloneDiv($div,$('#num_periods').val());
$('a.overtime_add_button').click(function(event) {
event.preventDefault();
var id = $(this).attr('id');
var id_split = id.split("_");
var period_num = id_split[3];
$('#period_' +period_num).find('#overtime').append(ot_div);
});
});
下面是jfiddle:如果要删除DOM元素，那么绑定将消失，需要再次添加绑定 我将创建一个函数来附加可以多次调用的行为
// Pass in context to reduce how far jQuery has to search
function attachButtonBehaviors(context){
// Add a class to know that you have bound the click event to this element and change your selector - alternatively this function could always unbind all clicks but I would argue the class method is preferable
$('a.overtime_add_button:not(.processed)', context).addClass('processed').click(function(event) {
event.preventDefault();
var id = $(this).attr('id');
var id_split = id.split("_");
var period_num = id_split[3];
$('#period_' +period_num).find('#overtime').append(ot_div);
});
}
在document.ready上调用此函数，克隆链接时调用此函数 如果要删除DOM元素，那么绑定将消失，需要再次添加绑定 我将创建一个函数来附加可以多次调用的行为
// Pass in context to reduce how far jQuery has to search
function attachButtonBehaviors(context){
// Add a class to know that you have bound the click event to this element and change your selector - alternatively this function could always unbind all clicks but I would argue the class method is preferable
$('a.overtime_add_button:not(.processed)', context).addClass('processed').click(function(event) {
event.preventDefault();
var id = $(this).attr('id');
var id_split = id.split("_");
var period_num = id_split[3];
$('#period_' +period_num).find('#overtime').append(ot_div);
});
}
在document.ready上调用此函数，克隆链接时调用此函数 在进行克隆时，需要动态绑定元素，如下所述
克隆时，需要动态绑定元素，如下所述
在jQuery中，
.click（）$（'.my class'）。单击（函数（e）{alert（'click'）；}），它仅将该回调应用于在该时刻与选择器匹配的元素。将.click（）
调用放入$（document）.ready（）
函数，使其在整个页面加载后应用。如果它位于$（document）.ready（）
函数之外，则当浏览器遇到它时，它会立即运行。这里有一个例子来说明我的意思，因为例子通常有帮助：
<html>
<head>
<script src="/path/to/jQuery.js"></script>
...
</head>
<body>
<div class="is-clickable click1">I change color and cause a popup</div>
<script type="text/javascript">
$('.is-clickable').click(function(e) {
alert('clickable div? blasphemy!');
});
</script>
<div class="is-clickable click2">I grow in size</div>
<script type="text/javascript">
$('.click1').click(function(e) {
$(this).css({ color:'#ff0000' });
});
$('.click2').click(function(e) {
$(this).css({ fontSize:'300%' });
});
</script>
...
</body>
</html>
此代码现在生成一个弹出alert（）
并更改颜色的div&一个弹出alert（）
并增加文本大小的div。第一个JavaScript位现在在整个页面加载后执行，因此选择器$（'.is clickable'）
现在实际上找到了两个匹配项，因此将alert（）
位添加到这两个匹配项中
你的问题听起来像是你遭受了这种痛苦；然而，你的问题听起来也像是你在不同的时间遇到了完全相同的问题。听起来好像当您将代码放入$（document）.ready（）
块时，它运行正确，并且您的$（'.is clickable'）
选择器实际上匹配了两个div（来自我的示例）。但是，在操作DOM之后，以及$（document）.ready（）
块已经运行之后，您的单击将不再有效。这是因为，代码在元素（您正试图修改的单击事件）存在之前已经运行。你可以很容易地解决这个问题。您可以执行一段代码，在所有选定元素上运行特殊的单击功能，而不管它们何时添加到页面。使用函数（从技术上讲是$（文档）。在（'click'，'is clickable'，function（）{}）
函数上，lol）
.on（）
可用于将事件侦听器应用于与选择器匹配的每个元素，这些元素在函数调用发生之前或之后进入页面。以下是使用代码执行此操作的方式：
// still run your extra setup, after the page loads
$(function() {
$div = $('.period:first');
clearClones();
cloneDiv($div,$('#num_periods').val());
});
// change your old line to use the .on() function
// OLD LINE: $('a.overtime_add_button').click(function(event) {
$(document).on('click', 'a.overtime_add_button', function(event) {
event.preventDefault();
var id = $(this).attr('id');
var id_split = id.split("_");
var period_num = id_split[3];
$('#period_' +period_num).find('#overtime').append(ot_div);
});
现在，您的单击事件应用于所有事件，可用于定义需要挂接到元素的任何基于元素的事件。这是一种集所有功能于一身的功能
无论如何，希望这能帮助你解释为什么你会有这个问题，以及你现在和将来如何轻松解决这个问题。此外，我希望其他人也觉得它有帮助。下面是一个如何使用.on（）
解决问题的工作示例。在jQuery中，.click（）
函数是一次性调用。这意味着，当您在选择器上调用它时，比如$（'.my class'）。单击（函数（e）{alert（'click'）；}），它仅将该回调应用于在该时刻与选择器匹配的元素。将.click（）
调用放入$（document）.ready（）
函数，使其在整个页面加载后应用。如果它位于$（document）.ready（）
函数之外，则当浏览器遇到它时，它会立即运行。这里有一个例子来说明我的意思，因为例子通常有帮助：
<html>
<head>
<script src="/path/to/jQuery.js"></script>
...
</head>
<body>
<div class="is-clickable click1">I change color and cause a popup</div>
<script type="text/javascript">
$('.is-clickable').click(function(e) {
alert('clickable div? blasphemy!');
});
</script>
<div class="is-clickable click2">I grow in size</div>
<script type="text/javascript">
$('.click1').click(function(e) {
$(this).css({ color:'#ff0000' });
});
$('.click2').click(function(e) {
$(this).css({ fontSize:'300%' });
});
</script>
...
</body>
</html>
此代码现在生成一个弹出alert（）
并更改颜色的div&一个弹出alert（）
并增加文本大小的div。第一个JavaScript位现在在整个页面加载后执行，因此选择器$（'.is clickable'）
现在实际上找到了两个匹配项，因此将alert（）
位添加到这两个匹配项中
你的问题听起来像是你遭受了这种痛苦；然而，你的问题听起来也像是你在不同的时间遇到了完全相同的问题。听起来好像当您将代码放入$（document）.ready（）
块时，它运行正确，并且您的$（'.is clickable'）
选择器实际上匹配了两个div（来自我的示例）。但是，在操作DOM之后，以及$（document）.ready（）
块已经运行之后，您的单击将不再有效。这是因为，代码在元素（您正试图修改的单击事件）存在之前已经运行。你可以很容易地解决这个问题。您可以执行一段代码，在所有选定元素上运行特殊的单击功能，而不管它们何时添加到页面。使用函数（从技术上讲是$（文档）。在（'click'，'is clickable'，function（）{}）
函数上，lol）
.on（）
可用于将事件侦听器应用于与选择器匹配的每个元素，这些元素在函数调用发生之前或之后进入页面。这就是你要做的