脚本在子页面上不起作用

Script doesn't work on child page

我不知道为什么我的 JQuery 代码在我的子页面上使用它将从 table 中选择的行的文本传输到父页面或开启者页面时不起作用.使用 AJAX.

加载 table 上的行

如果我尝试创建一个 table,在 HTML 文件本身上设置它的行和 td,并使用 JQuery 代码,它就可以工作。怎么样?

这是我的 HTML、AJAX、脚本

的代码

HTML

<body onload="showDetails()">
  <div class="container">
    <div class="row" style="margin-top: 30px;">
      <div class="col-sm-12 col-md-12 col-lg-12">
        <center>
          <h2>Products</h2>
        </center>
        <br/>
        <table id="products-table" class="table table-hover">
        </table>
      </div>
    </div>
  </div>
  <script src="script/jquery-2.1.1.min.js"></script>
  <script>
    function showDetails() {
      var xmlhttp;
      if (window.XMLHttpRequest) { 
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
      } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById("products-table").innerHTML =
                                                        xmlhttp.responseText;
        }
      }
      xmlhttp.open("POST", "product.php", true);
      xmlhttp.send();
    }
  </script>
  <script src="q.js"></script>

PHP

 echo '<tr>
        <th>Image</th> 
        <th>Brand</th>
        <th>Model</th>
        <th>Price</th>
        <th>Terms</th>
        <th>Class</th>
        <th></th>
 </tr>';
 try {
     $dbh = new PDO('mysql:host=localhost;dbname=mfcwebsitedb', 'root', 'pass@word1');
     foreach($dbh->query('SELECT * from products') as $row) 
     {
        echo '<tr> 
            <td class = "img">'.'<img src = "product-img/'.$row['img_name'].'" style = "width: 200px; height: 200px; padding-top: 5px; padding-bottom: 5px;">'.'</td>
            <td class = "brand">'.$row['brand'].'</td>
            <td class = "model">'.$row['model'].'</td>
            <td class = "price">'.$row['price'].'</td>
            <td class = "terms">'.$row['terms'].'</td>
            <td class = "class">'.$row['class'].'</td>
            <td><button class = "btn btn-primary selectbtn">Select</button></td>
          </tr>';
     }

 $dbh = null;
 } catch (PDOException $e) {
    print "Error!: " . $e->getMessage() . "<br/>";
    die();
    $dbh = null;
 }

JQUERY

 $(document).ready(function(){
     $('#products-table .selectbtn').click(function() {

        var td = $(this).closest('tr');

        var f;
        var s;
        var t;
        var q;
        var w;
        var g;

        $(td).each(function(){
            f = $(this).find(".class").html(); 
            s = $(this).find(".brand").html(); 
            t = $(this).find(".model").html(); 
            q = $(this).find(".price").html(); 
            w = $(this).find(".terms").html(); 
            g = $(this).find(".img").html(); 
        });

        var x = 'Class: ' + f + '\n' + 'Brand: ' + s + '\n' 
                + 'Model: ' + t + '\n'
                + 'Price: ' + q + '\n' + 'Terms: ' + w;
        var z = g + '<br/>' + '<b>Class:</b> ' + f + '<br/>\n' 
                + '<b>Brand: </b>' + s + '<br/>\n' 
                + '<b>Model: </b>' + t + '<br/>\n' 
                + '<b>Price: </b>' + q + '<br/>\n' + '<b>Terms: </b>' + w;
        opener.document.motorappform.productdesc.value = x;
        opener.document.motorappform.productdeschidden.value = z;
        self.close();
     });
 });

您必须使用事件委托来捕获动态创建的元素:

$(document).on('click', '#products-table .selectbtn', function() {
   // your code here ..
});

编辑

此外,在您的函数中,将 $(this) 存储在一个变量中并使用该变量而不是多次实例化它:

(使用 td 而不是 $(td)

td.each(function(){
    var that = $(this);
    f = that.find(".class").html(); 
    s = that.find(".brand").html(); 
    t = that.find(".model").html(); 
    q = that.find(".price").html(); 
    w = that.find(".terms").html(); 
    g = that.find(".img").html(); 
});