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

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')的选择器应作为第二个参数传递.