无法获得复选框的值

我有一个选择标记的产品。当我选择产品时，产品的颜色列表由jQuery从名为“颜色”的列表（ul）中传输和放置。无法获得复选框的值

到目前为止一切正常。但是当我尝试使用jQuery获取颜色的值时，我遇到了一个问题。

当我在functions.js文件中使用Action 1时，我无法选择颜色值，但是当我使用Action 2时，我可以采用颜色值。

我想知道的是，如果任何人都可以向我解释为什么第一个操作失败。

谢谢任何能向我解释的人。

的index.php

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Checkbox</title> 
     <script type="text/javascript" src="jquery-1.11.3.min.js"></script> 
     <script type="text/javascript" src="functions.js"></script> 
    </head> 
    <body> 
     <form method="post"> 
      <div> 
       <select name="products"> 
        <option value="0">Products...</option> 
        <option value="pant">Pant</option> 
        <option value="shirt">Shirt</option> 
       </select> 
      </div> 
      <div> 
       <ul id="colors" style="list-style:none;"></ul> 
      </div> 
     </form> 
    </body> 
</html>

functions.js

// ---------- ACTION 1 : FAIL ---------- 
$(document).ready(function() { 
    $('select[name="products"]').change(function() { 
     var product = $(this).val(); 

     $.post('colors.php', {product:product}, function(colors) { 
      if (colors !== '0') { 
       $('ul#colors').html(colors); 
      } else { 
       $('ul#colors').html('Nothing...'); 
      } 
     }); 
    }); 

    $('input[name="color"]').click(function() { 
     var color = $(this).val(); 
     console.log(color); 
    }); 
}); 

// ---------- ACTION 2 : OK ---------- 
$(document).ready(function() { 
    $('select[name="products"]').change(function() { 
     var product = $(this).val(); 

     $.post('colors.php', {product:product}, function(colors) { 
      if (colors !== '0') { 
       $('ul#colors').html(colors); 

       $('input[name="color"]').click(function() { 
        var color = $(this).val(); 
        console.log(color); 
       }); 
      } else { 
       $('ul#colors').html('Nothing...'); 
      } 
     }); 
    }); 
});

colors.php

<?php 

// connection 
$user = ''; 
$pass = ''; 
$host = 'mysql:host=localhost;dbname=product'; 

$conn = new PDO($host, $user, $pass); 

// search 
(!empty($_POST['product']) && $_POST['product'] !== '0') ? $product = $_POST['product'] : $product = '0'; 


if ($product !== '0') { 
    $query = $conn->prepare('SELECT color FROM products WHERE product = :product'); 
    $query->bindParam(':product', $product, PDO::PARAM_STR, 20); 
    $query->execute(); 

    $result = $query->fetchAll(PDO::FETCH_COLUMN); 

    foreach ($result as $value) { 
     echo "<li><input name=\"color\" type=\"checkbox\" value=\"" . $value . "\"> " . $value . "</li>"; 
    } 

} else { 
    echo "0"; 
} 

?>

产品表

ID |产品|颜色

1 |喘气|黑色

2 |喘气|蓝色

3 |衬衫|绿色

4 |衬衫|橙色

5 |衬衫|红

来源

2015-09-01 Learning

输入元素动态地输入DOM。检查事件代表团。 Action 2中的'click'事件工作，因为它在'.post'调用完成后被绑定。而Action 1中的失败则是因为在ajax完成之前单击处理程序已注册。回答*** [在这里类似的问题]（http://stackoverflow.com/a/32336579/3639582）*** –

@ Shaunak D感谢您的帮助！ – Learning

当您运行页中ACTION下面的代码1：

  $('input[name="color"]').click(function() { 
       var color = $(this).val(); 
       console.log(color); 
      });

针对性不存在输入元素;该元素在页面加载后立即加载。重写并维护代码位置的最佳方法是使用委托事件：

$('#colors').on('click', 'input[name="color"]', function() { 
    var color = $(this).val(); 
    console.log(color); 
});

来源

2015-09-01 17:28:07 PeterKA

@ PeterKA-感谢您的帮助！ – Learning

没问题@Learning。如果您发现它有用，请随时投票并接受此答案。 – PeterKA

无法获得复选框的值

回答

相关问题