在引导模式3不起作用的情况下编辑数据

Question

我想用bootstrap modal编辑数据，但当我运行我创建的脚本时，单击事件不起作用。我希望根据"dataProduct“属性显示带有特定数据的模式。

源码如下：

<a href="javascript:;" data-idProduct="<?= $data['id_product'] ?>" class="edit-dataProduct btn btn-xs btn-warning"><i class="fa fa-pencil"></i></a>

<div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Edit Product</h4>
        </div>
        <form id="form-add" action="<?= $_SERVER['PHP_SELF'] ?>" method="POST" enctype="multipart/form-data">
        <div class="modal-body edit-modal">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             <input type="submit" name="editProduct" class="btn btn-primary" value="Update Product">
        </form>
        </div>
    </div>
</div>

​

这是我的javascript代码：

$("#table_products").on('click', '.edit-dataProduct' ,function(event) {
    event.preventDefault();

    $.get('http://localhost/market/member/detail_product.php?id_product='+$(this).attr('data-idProduct'), function(data) {
        $(".modal-body").html(data);
    });

        $("#modalEdit").modal('show');

});

然后，这是php脚本：

<?php

$id_product = $_GET['id_product'];

$conn = new MySQLi('localhost','root','','marketplace'); 

$sql    = "SELECT products.*, categories.name AS category FROM products, categories WHERE products.id_cat = categories.id_cat AND products.id_product='".$id_product."'";
$query  = $conn->query($sql);
$data   = $query->fetch_assoc();

?>
<div class="row">
<div class="col-md-4">
    <div class="form-group">
        <label>ID Product</label>
        <input type="text" id="id_product" name="id_product" readonly value="<?= $id_product ?>" class="form-control">
    </div>
    <div class="form-group">
        <label>Name</label>
        <input type="text" id="name" name="name" value="<?= $data['name'] ?>" class="form-control" required>
    </div>
    <div class="form-group">
        <label>Size</label>
        <input type="text" id="size" name="size" value="<?= $data['size'] ?>" class="form-control" required>
    </div>
    <div class="form-group">
        <label>Stock</label>
        <input type="number" id="stock" name="stock" value="<?= $data['stock'] ?>" class="form-control" required>
    </div>
</div>
<div class="col-md-4">
    <div class="form-group">
        <label>Categories</label>
        <select id="id_cat" name="id_cat" class="form-control" required>
            <option value="">-- Categories --</option>
            <?php if ($data['id_cat'] == 1) { ?>
            <option value="1" selected>Batik Tulis</option>
            <option value="2">Batik Cap</option>
            <option value="3">Batik Printing</option>
            <?php }else if ($data['id_cat'] == 2) { ?>
            <option value="1">Batik Tulis</option>
            <option value="2" selected>Batik Cap</option>
            <option value="3">Batik Printing</option>
            <?php }else if ($data['id_cat'] == 3) { ?>
            <option value="1">Batik Tulis</option>
            <option value="2">Batik Cap</option>
            <option value="3" selected>Batik Printing</option>
            <?php } ?>
        </select>
    </div>
    <div class="form-group">
        <label>Equity</label>
        <input type="number" id="equity" name="equity" value="<?= $data['equity'] ?>" class="form-control" required>
    </div>
    <div class="form-group">
        <label>Price</label>
        <input type="number" id="price" name="price" value="<?= $data['price'] ?>" class="form-control" required>
    </div>
    <div class="form-group">
        <label>Zip Code &amp; Phone Number</label>
        <input type="file" name="images" id="images">
    </div>
    <input type="hidden" id="id_user" name="id_user" value="<?= $data['id_user'] ?>">
    <input type="hidden" id="old_images" name="old_images" value="<?= $data['images'] ?>">
</div>
<div class="col-md-4">
    <img src="<?= $data['images'] ?>" alt="<?= $data['name'] ?>" class="img-responsive" style="width: 75%;margin: auto;">
</div>
</div>

我怎么才能修复它？

Answer 1

我认为你只需要把它变成$(document.body).on('click','.edit-dataProduct', function(event){，而不是$("#table_products").on('click', '.edit-dataProduct' ,function(event) {