jQuery单击仅触发一次 [英] jquery click only firing once
问题描述
通过查看其他帖子，我尝试将live()和on()添加到我的代码中，但是click函数仅起作用一次，然后将不再起作用.有人可以指出我做错了什么吗?这是我最新的代码:
From looking at other posts I've tried to add live() and on() to my code but the click function only works once and then wont work anymore. Can someone point out what I'm doing wrong. Here is my latest code:
<script language="javascript">
//Used to delete a step from the database after confirming with user
$(document).ready(function(){
$("#success_message2").hide();
$(".delete_it").on('click',function() {
var answer = confirm('Are you sure you want to delete this step?');
if (answer){
var data = {
'hospid': '<? echo $hospid; ?>',
"step_id" : $(this).parent().attr("name")
};
$.post("../php/progress_steps_delete.php",
data,
function (data) {
if (data.success) {
$("#success_message2").show('slow');
setTimeout(function () {
$("#success_message2").hide('slow');
}, 5000);
$('#step_list').html(data.success);
} else {
alert('not done');
$("#non-grid").prepend(data.error);
}
}, "json");
}
});
});
</script>
抱歉，这是html
<body>
<div id="body-wrapper">
<?php include_once(getBasePath()."site_hospital_files/elements/navbar.php"); ?>
<div id="main-content">
<div class="content-box">
<div class="content-box-header">
<h3>Progress Steps</h3>
</div>
<div class="content-box-content">
<div class="msg-status div_message" id="success_message">New step added successfully!</div>
<div class="msg-status div_message" id="success_message1">New List Order Updated!</div>
<div class="msg-status div_message" id="success_message2">Step Deleted!</div>
<div id="non-grid">
<form method="post" name="upload_form" id="upload_form">
<fieldset style="height:100px; margin-left:25px; margin-top:15px; background-color:#FFF;">
<legend style="padding:2px;">Add a Step</legend>
<div class="column-left" style="width:50%;">
<label class="space">Step Name</label>
<input class="text-input tall-input required alnum" type="text" id="step_add" name="step_add" style="width:90%;"/>
</div>
<div class="column-left" style="width:20%; padding-top:25px;">
<input type="hidden" name="hosp" id="hosp" value="<? echo $hospid; ?>"/>
<input type="submit" id="snd_upload" name="snd_upload" value="Submit Step" class='button' />
</div>
</fieldset>
</form>
<form name="delete_form" method="post" id="delete_form">
<fieldset style="height:100%; margin-left:25px; margin-top:15px; background-color:#FFF;">
<legend style="padding:2px;">List of Steps</legend>
<h3>Drag and Drop to Change Step Order</h3>
<input type="hidden" name="hosp" id="hosp" value="<? echo $hospid; ?>"/>
<div id="step_list">
<? echo $step_list ?>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="clear"></div>
<div id="footer">© Copyright 2012 Inc. | <a href="#">Top</a></div>
</div>
</div>
</body>
好的，第二次编辑，我想我已经开始了解这里的问题了.这是生成我的列表的PHP.我单击的元素被埋在容器中.我不希望单击整个容器，仅单击其中的图像.那可能吗?到目前为止，感谢您的所有建议.我正在学习....
Okay, second edit, I think I'm starting to understand the problem here. Here is the php that is generating my list. And the element I'm clicking on is buried in the container. I don't wish to click the entire container, just the image inside. Is that possible? Thanks for all the advice so far. I'm learning....
function getSteps($dbh, $hospid)
{
$sql1 = $dbh->prepare('
SELECT COUNT(*)
FROM progress_steps
WHERE hospital_id = :hospid
');
$sql1->bindValue('hospid', $hospid);
$sql1->execute();
$num_rows = $sql1->fetchcolumn();
$sql = $dbh->prepare('
SELECT *
FROM progress_steps
WHERE hospital_id = :hospid
ORDER BY step_number
');
$sql->bindValue('hospid', $hospid);
$sql->execute();
if ($num_rows > 0) {
$steps_table = '';
$isOdd = true;
while (($row = $sql->fetch(PDO::FETCH_ASSOC)) !== false) {
$steps_table .= "<div class='hover_hand' name='$row[step_id]' id='item_$row[step_id]'><div style='float:left' class='delete_it'><img src='../images/delete_icon.gif'></div> <div style='float:left' class='middle_text'> $row[step_name]</div><input type='hidden' name='itemid[]' value='$row[step_id]'/></div>";
};
} else {
$steps_table = '';
$steps_table .= "<div>You need to add steps.</div>";
};
return $steps_table;
}
推荐答案
我假设(根据您的代码 ).delete_it项位于#step_list元素内.
I am assuming (by your code) that the .delete_it item is inside the #step_list element.
因此，当您将其html替换为ajax结果时，也会删除绑定的处理程序.
So when you replace its html with the ajax results you remove the bound handlers as well..
您需要将处理程序绑定到DOM层次结构中未删除的元素上，例如#step_list本身..
You need to bind the handler to an element up in the DOM hierarchy that does not get removed, for example the #step_list itself..
因此从以下更改绑定
$(".delete_it").on('click',function() {
到
$("#step_list").on('click','.delete_it', function() {
这篇关于jQuery单击仅触发一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
