Не удалось получить значение флажка

У меня есть Выбрать маркированные Продукты. Когда я выбираю продукт, список цветов продуктов переносится и помещается jQuery из списка (ul) под названием Colors.Не удалось получить значение флажка

До сих пор все работает отлично. Но когда я пытаюсь получить значение цвета с помощью jQuery, я столкнулся с проблемой.

Когда я использую действие 1 в файле functions.js, я не могу выбрать значение цвета, но когда я использую действие 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"; 
} 

?>

изделия table

ID | продукт | цвет

1 | брюки | Черный

2 | брюки | Синий

3 | рубашка | Зеленый

4 | рубашка | Оранжевый

5 | рубашка | Красный

источник

2015-09-01 Learning

Элементы ввода динамически входят в DOM. Проверьте делегирование событий. События 'click' в Action 2 работают потому, что они связаны после завершения вызова' .post'. в то время как в Action 1 происходит сбой, потому что обработчик клика зарегистрирован до завершения ajax. Ответил *** [аналогичный вопрос здесь] (http://stackoverflow.com/a/32336579/3639582) *** –

@ Shaunak D Спасибо за помощь! – Learning

Когда страница работает ниже код в ДЕЙСТВИЯ 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

Не удалось получить значение флажка

ответ

Смежные вопросы