Question

我不知道为什么我的JQuery代码在我的子页面上使用它以将表格中选择的行的文本传输到父页面或开启页面时不起作用。使用AJAX加载表上的行。

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

以下是我的HTML，AJAX，Scripts

代码

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();
     });
 });

Answer 1

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

$(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(); });

脚本在子页面上不起作用

1 个答案: