Question

我已经在努力解决这个问题了（在查看此网站后）我发现我没有使用.on委托点击一个点击的点击功能php动态生成html。

我现在添加了.on，但我仍然发现需要点击的项目需要在首次使用时点击两次。

$(document).on('click', '.drone', function() {

  if ($(this).hasClass( "unselected" )) {

    var partNumber = $(this).find("p").text();

    //Check if input fields are empty and fills if so
    if ($("#input-one").val().length == 0 ){
      $('input[type=text]#input-one').val(partNumber);

      //Add selected class to box
      $(this).addClass('selected');
      $(this).removeClass('unselected');
    }
    else if ($("#input-two").val().length == 0 ){
      $('input[type=text]#input-two').val(partNumber);

      //Add selected class to box
      $(this).addClass('selected');
      $(this).removeClass('unselected');
    }
  }
  else { 
    $(this).addClass('unselected');
    $(this).removeClass('selected');
    var partNumber = $(this).find("p").text();
      //IF to check which input box to remove details from
    if (partNumber == $("#input-one").val()){
      $('input[type=text]#input-one').val("");
    }
    else if (partNumber == $("#input-two").val()){
      $('input[type=text]#input-two').val("");
    }
  }
});

以下是用于生成内容的php。

   <?php 
//Get products information
$brand_query = "SELECT * FROM table INNER JOIN `WebProducts` on table.part_number = Products.stockcode ORDER by price DESC" or die("Error in the consult.." . mysqli_error($db2));
$brand_result = mysqli_query($db2, $brand_query);

while($prod_row = mysqli_fetch_array($brand_result)){
$prod_display .= '
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product drone">
                <div class="product-info">

                    <img class="product-image" src="http://www.sitename.co.uk/image.php?width=300&amp;filename=' . urlencode($prod_row['imgfilename']) . '" alt="'.$prod_row['description'].'" />
                    <p class="part">'.$prod_row['part_number'].'</p>
                    <h3 class="product-title">'.$prod_row['description'].'</h3>
                    <span class="product-price highlight">£'.$prod_row['price'].'</span>
                    <button class="mail-modal-btn btn btn-default"><i class="fa fa-eye"></i><span class="action-text">Add to Compare</span></button>

                    <a style="visibility:hidden" href="'.$home_page_link.'product/'.$prod_row['part_number'].'/'.url_slug($prod_row['description']).'"><button class="mail-modal-btn btn btn-default"><i class="fa fa-eye"></i><span class="action-text">View Details</span></button></a>
                </div>

</div></div>';
}

echo $prod_display;
?>

Answer 1

这是因为您在第一次创建时没有设置类unselected，因此else块会触发，删除selected类（不存在），以及第一次添加unselected类。因此，需要第二次单击才能触发第一个if代码块。

请尝试使用此PHP代码：

   <?php 
//Get products information
$brand_query = "SELECT * FROM table INNER JOIN `WebProducts` on table.part_number = Products.stockcode ORDER by price DESC" or die("Error in the consult.." . mysqli_error($db2));
$brand_result = mysqli_query($db2, $brand_query);

while($prod_row = mysqli_fetch_array($brand_result)){
$prod_display .= '
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="product drone unselected">
                <div class="product-info">

                    <img class="product-image" src="http://www.sitename.co.uk/image.php?width=300&amp;filename=' . urlencode($prod_row['imgfilename']) . '" alt="'.$prod_row['description'].'" />
                    <p class="part">'.$prod_row['part_number'].'</p>
                    <h3 class="product-title">'.$prod_row['description'].'</h3>
                    <span class="product-price highlight">£'.$prod_row['price'].'</span>
                    <button class="mail-modal-btn btn btn-default"><i class="fa fa-eye"></i><span class="action-text">Add to Compare</span></button>

                    <a style="visibility:hidden" href="'.$home_page_link.'product/'.$prod_row['part_number'].'/'.url_slug($prod_row['description']).'"><button class="mail-modal-btn btn btn-default"><i class="fa fa-eye"></i><span class="action-text">View Details</span></button></a>
                </div>

</div></div>';
}

echo $prod_display;
?>

重要的部分是：

<div class="product drone unselected">

动态php和jQuery点击不起作用

1 个答案: