Question

我有一个选择标记的产品。当我选择产品时，产品的颜色列表由jQuery从名为Colors的列表（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 |衬衫|红色

Answer 1

当您在 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);
});

无法获得复选框的值

1 个答案: