Question

我有两个在我的页面上运行的脚本，它们可以独立工作，但不能一起工作。脚本的第一部分是ajax POST，它根据搜索从我的数据库中选择行。这都是在模态窗口中呈现的。第二个脚本等待.btnSave id中的单击，关闭模式窗口并将id的值复制到表的最后一行。

这两个javascript文件合在一起：

$(document).ready(function()
{

$('.btnSave').click(function() {
        alert();
var value = this.id;

$('#tablemain tbody tr:last #itemlookup').val(value);
$('#tablemain tbody tr:last #itemlookup').focus();
$('#productlookup').modal('hide');
});


$("#simple-post").click(function()
{
$("#ajaxform").submit(function(e)
{

    var postData = $(this).serializeArray();

    $.ajax(
    {
        url : "ajax.php",
        type: "POST",
        data : postData,
        success:function(data) 
        {
            $("#simple-msg").html(data);

        }

    });
    e.preventDefault(); //STOP default action

});

$("#ajaxform").submit(); //SUBMIT FORM
});

});

包含模态窗口的主要PHP文件：

<div id="productlookup" class="modal fade" role="dialog">
      <div class="modal-dialog"> 

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Instant Car Parts Stock Lookup</h4>
          </div>
          <div class="modal-body">
                <div class="main-content">
      <section class="with-table"><form name="ajaxform" id="ajaxform" action="ajax.php" method="POST">
      <div id="simple-msg"></div><div class="vehilcle-form-sect">
             <div class="col-lg-4 col-md-4 "><p align="center"><input type="text" name="vehicleid" placeholder="VehicleID / Search Below"></p></div>

                <div class="col-lg-4 col-md-4">

                  <p align="center">
          <input type="button"  id="simple-post" value="Search" />
                  </p>
                </div>


        </div></form>


        </section>
          </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

最后是ajax.php（工作正常）：

<?php include("../../config.php");
include('../../includes/session.php');
session_start(); ?>
<table class="datatable tablesort selectable paginate full" width="100%">

                       <tbody>
                         <?php 

 if ($_POST['make']) { 
 $breaker_id = $_SESSION['breaker_id'];
 $Make = $_POST['make'];
 $Model = $_POST['model'];
 $Year = $_POST['year']; 


 $show=mysql_query("SELECT * FROM stock where breaker='$breaker_id' and Make='$Make' and Model='$Model' and (Year = '".$Year."' OR YearRange LIKE '%".$Year."%')");

 }

 if ($_POST['vehicleid']) { 
 $breaker_id = $_SESSION['breaker_id'];
 $vehicleid = $_POST['vehicleid'];



$show=mysql_query("SELECT * FROM stock where breaker='$breaker_id' and VehicleID='$vehicleid' AND VehicleID!=''");


 }


$xx = 1;
while($row=mysql_fetch_array($show)){



?>
                           <tr id="row_<?php echo $xx; ?>">
                             <td><strong class="btnSave" id="<?php echo $row['id']; ?>"><?php echo $row['id']; ?>
    </strong>
                               <p><?php echo $row['stock_item']; ?> &pound;<?php echo $row['price']; ?></p>
                              </td>
                           </tr><?php

$xx++;
}  ?>
                       </tbody>
          </table>

我认为这是因为javascript不能识别.btnSave，因为它是在ajax之后加载的？

Answer 1

在您的情况下，您可以将事件委派与.on一起使用：

$(document).on('click', '.btnSave', function() {...});

请注意，jquery上下文必须存在于绑定时刻，并且它应包含所有动态添加的元素。为了确保这一点，您可以使用$(document)作为上下文，因为它显然存在于页面加载中。定义绑定DOM元素（'.btnSave'）的选择器应作为第二个参数传递。

Answer 2

尝试更改： $('.btnSave').click(function() { 至 $('.btnSave').live('click', function() {或$('.btnSave').on('click', function() {

请注意，您当前的代码对SQL注入攻击持开放态度。考虑清理你的输入。

Answer 3

您应该使用：

$(".btnSave").on("click", function(){
    //doo what you need
});

不

$(".btnSave").click(function(){
    //doo what you need
});

因为这种方式功能适用于动态添加的dom元素。

Answer 4

您可以使用委托......

http://api.jquery.com/delegate/

$("#simple-msg").on("click", ".btnSave", function(){
 // do stuff here
})

.click函数在ajax POST中不起作用

4 个答案: