無法獲得複選框的值

我有一個選擇標記的產品。當我選擇產品時，產品的顏色列表由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

無法獲得複選框的值

回答

相關問題