jQuery .post（）内容通过随后的jQuery调用返回原始内容

我用.post（）使用form和db调用替换了内容。新内容是来自php查询的另一个表单和数据表。然后我使用新表格上的新表单来更改一些css。但是，当我在新表单中输入数据时，点击事件中的内容将恢复为原始内容。我知道我不会更改页面内容的服务器端，但我认为jQuery适用于当前的DOM。jQuery .post（）内容通过随后的jQuery调用返回原始内容

原创内容：

<div id="bodyContent"> 
<form id="usualValidate" class="mainForm" method="post" action=""> 
<label>Barcode:<span>*</span></label> 
    <input type="text" class="required" name="startBarcode" id="startBarcode"/> 
    <input type="submit" value="submit" class="blueBtn" id="startBtn" /> 
</form> 
</div>

更换的内容：

<div id="bodyContent">  
<form id="checkinProcess" class="mainForm" method="post" action=""> 
    <label>Barcode:<span>*</span></label> 
    <input type="text" class="required" name="processBarocdes" id="processBarcodes"/> 
    <input type="submit" value="submit" class="blueBtn" id="submitBtn" /> 
</form> 
<table id="shippedBarcodesTable"> 
    <thead>...</thead> 
    <tbody id="shippedBarcodes"> 
    <tr id="B000503513">...</tr> 
    <tr id="B000496123">...</tr> 
    </tbody> 
</table> 
</div>

JS：第一加载新的内容。第二个突出显示已加载的表中的一行。突出显示脚本在整页刷新的传统页面设置中起作用。但是试图用jQuery加载一个动态表格，然后用随后的jQuery突出显示表格中的一行，使其恢复为原始的源内容。

$(document).ready(function() { 

$("#startBtn").on("click", startCheckin); 
function startCheckin(sevt) { 
    sevt.preventDefault(); 
    var startBC = $("#startBarcode").val(); 
    $.post("checkin_process.php", 
    {startBarcode : startBC}, 
    function(data) { 
     $("#bodyContent").html(data); 
    }); 
} 

$("#submitBtn").on("click", highlight); 
function highlight(hevt) { 
    hevt.preventDefault(); 
    var scanbc = $("#processBarcodes").val(); 
    $("#" + scanbc).addClass("curChecked"); 
    $('html, body').animate({scrollTop: $("#" + scanbc).offset().top-150}, 750); 
} 

});

来源

2013-02-04 Rolo Tomassi

您的highlight函数永远不会被调用，因为它没有连接到动态创建的按钮。由于提交按钮的默认操作被调用 - 表单被提交并且页面正在刷新，因为没有定义操作URL。这就是为什么你看到页面，因为它是在$.post电话之前。

为了解决这个问题，你应该这行

$("#submitBtn").on("click", highlight);

更改为类似的东西：

$("body").on("click", "#submitBtn", highlight);

你应该不与项目的选择动态加载的元素连接您的功能（S）您想要将此事件作为on函数中的第二个参数进行触发。查询.on documentation了解更多信息。

而顺便说一句，你的函数的定义不必在$(document).ready之内。

来源

2013-02-05 00:22:03

谢谢。我明白你的意思了。阅读.on文档，我现在明白了，现在我可以在自己的代码中看到它。 –

@RoloTomassi我很高兴能帮上忙。阅读文档是理解为什么某些功能无法按预期工作的最佳第一步。 ^^ –

jQuery .post（）内容通过随后的jQuery调用返回原始内容

回答

相关问题