Question

我在让我的jquery代码在我的网站上正常工作时遇到了问题。我之前使用过PHP，之前我已经完成了该网站，但我决定在OOP中重新使用它，使用mysqli代替它，并且由于网站的复杂性而使其更加精致。

我的OOP版本是这样设计的，我有一个固定的标题（标题包含我所有的jquery链接）和页脚，但是当点击任何导航链接时，没有页面重新加载，但是另一个页面的内容被加载到一个特定的div（#load_here）。这工作正常，我的问题是，当另一个页面上的表单，通过jquery提交到我的数据库加载到我的div（#load_here）时，该特定表单的jquery代码不起作用。我已尝试将我的jquery链接包含到正在加载内容的页面，但这会导致我的网站无法再正常工作。任何解决方案？

下面是一些说明性的代码：

    <html>
    <header>
            <script src="jquery-1.11.1-jquery.min.js"></script>

<scrirpt>    
    $("#nav_page_a").on("click", function () {
    $("#load_here").load("link 1.php");
    });
    $("#nav_page_b").on("click", function () {
    $("#load_here").load("link 2.php");
    });
    $("#nav_page_c").on("click", function () {
    $("#load_here").load("link 3.php");
    });
</script>

    </header>

    <body>
    <a  id="#nav_page_a" href="#">link 1</a>
    <a  id="#nav_page_b" href="#">link 2</a>
    <a  id="#nav_page_c" href="#">link 3</a>

    <div id="load_here">
    </div>

    </body>

    </html>

正在加载的其他页面：

<?php
require_once 'include/initialize.php'; //Where my OOP classes are

$pages = new pages(); // a class

$pages->Link_1(); // the form html and php content
$pages->Link_1Script(); // the jquery script

?>

即使我决定不将脚本jquery代码与表单内容分开，它仍然无法正常工作。

这是我提交表单的jquery代码：

<script>   
$(document).ready(function() {
$("#submit_product").click(function() {
var category_key = $("#category_key").val();
var branch_code = $("#branch_code").val();
var product_name = $("#product_name").val();
var pieces = $("#pieces").val();
var measurement = $("#measurement").val();
var price = $("#price").val();
var reorder = $("#reorder").val();
var exp_date = $("#exp_date").val();
var note = $("#note").val();
if (exp_date == '' || reorder == '' || category_key == '' || pieces == '' || price == '' || branch_code == '' || measurement == '' || product_name == '') {
window.alert("Insertion Failed, Some Fields are Blank....!!");
} else {
if(pieces < reorder){
window.alert("Re-order Level cannot be greater than pieces available!!");
}else{
// Returns successful data submission message when the entered information is stored in database.
$.post("scripts/products.php", {
category_key1: category_key,
branch_code1: branch_code,
product_name1: product_name,
pieces1: pieces,
measurement1: measurement,
price1: price,
reorder1: reorder,
exp_date1: exp_date,
note1: note
}, function(data) {
window.alert("Product successfully created!!!");
$('#register_formProduct')[0].reset(); // To reset form fields
});
}
}
});
});
</script>

Answer 1

这应该有用。把它放在你的父页面中。我稍微修改了你的脚本

$("#nav_page_a").on("click", function () {
    $("#load_here").load("link 1.php", function(){
        $("#submit_product").on("click", function() {
            var category_key = $("#category_key").val(),
                branch_code = $("#branch_code").val(),
                product_name = $("#product_name").val(),
                pieces = $("#pieces").val(),
                measurement = $("#measurement").val(),
                price = $("#price").val(),
                reorder = $("#reorder").val(),
                exp_date = $("#exp_date").val(),
                note = $("#note").val();
            if (exp_date == '' || reorder == '' || category_key == '' || pieces == '' || price == '' || branch_code == '' || measurement == '' || product_name == '') {
                window.alert("Insertion Failed, Some Fields are Blank....!!");
                return false;
            } 
            if(pieces < reorder){
                window.alert("Re-order Level cannot be greater than pieces available!!");
                return false;
            }
            // Returns successful data submission message when the entered information is stored in database.
            $.ajax({
                url : "scripts/products.php", 
                data : { "category_key1" : category_key, "branch_code1" : branch_code, "product_name1" : product_name, "pieces1" : pieces, "measurement1" : measurement, "price1" : price, "reorder1" : reorder, "exp_date1" : exp_date, "note1" : note}, 
                dataType : "html",
                type : "post"
            }).done(function(data) {
                window.alert("Product successfully created!!!");
                $('#register_formProduct')[0].reset(); // To reset form fields
            });
            return false;
        });
    });
 });

Answer 2

取消绑定点击事件或关闭点击事件。你必须包含一个最新版本的jquery文件，而不是太多的jquery。

$("#nav_page_a").unbind("").on("click", function () {
$("#load_here").load("link 1.php");
});
$("#nav_page_b").unbind("click").on("click", function () {
$("#load_here").load("link 2.php");
});
$("#nav_page_c").unbind("click").on("click", function () {
$("#load_here").load("link 3.php");
});

Answer 3

谢谢大家，我能够想出最终的作品

$("#nav_page_i").unbind("click").on("click", function () {
$("#load_here").load("addproduct.php", function () {

$(".table").change(function(){
var val1 = +$("#pieces").val();
var val2 = +$("#reorder").val();

if(!(val1 > val2)){
$("#reorder").val((val1));
}
});

$("#submit_product").click(function() {
var category_key = $("#category_key").val();
var branch_code = $("#branch_code").val();
var product_name = $("#product_name").val();
var pieces = $("#pieces").val();
var measurement = $("#measurement").val();
var price = $("#price").val();
var reorder = $("#reorder").val();
var exp_date = $("#exp_date").val();
var note = $("#note").val();
if (exp_date == '' || reorder == '' || category_key == '' || pieces == '' || price == '' || branch_code == '' || measurement == '' || product_name == '') {
window.alert("Insertion Failed, Some Fields are Blank....!!");
} else {
if(pieces < reorder){
window.alert("Re-order Level cannot be greater than pieces available!!");
}else{
// Returns successful data submission message when the entered information is stored in database.
$.post("scripts/products.php", {
category_key1: category_key,
branch_code1: branch_code,
product_name1: product_name,
pieces1: pieces,
measurement1: measurement,
price1: price,
reorder1: reorder,
exp_date1: exp_date,
note1: note
}, function(data) {
window.alert("Product successfully created!!!");
$('#register_formProduct')[0].reset(); // To reset form fields
});
}
}
});
});
});

这是我工作中的实际代码，工作正常。

当另一个页面中的内容加载到特定div中时，jquery代码不起作用，没有页面重新加载

3 个答案: