Question

我正在开发一个网站，用户可以在其中选择（html）列表的产品。此列表（必须）通过javascript函数（getOptionsForm（））动态创建。当用户在列表中选择产品时，必须在框中显示相关的产品详细信息。当用户选择另一个盒子时，必须显示不同的细节，这部分是我挣扎的;

我的问题是我在框中难以实现productdetail信息的显示;不知怎的，jquery .change（）不起作用，我想我理解为什么，但我不知道如何解决它;如何动态创建选择器（类ordertype）时应用.change（）函数？

请参阅下面的简化示例代码：

$(document).ready(function(){

    var getOptionsForm = function() {
        var form = $('<select class="ordertype"> <option value='1'> prod1 </option><option  value='2'> prod2 </option> </select>');
    }

    var form = getOptionsForm();

    $('#wrapper').append(form);

    $(".ordertype").focus(function () {
        // Store the current value on focus and on change
        previous1 = this.value; //old select value
    }).change(function() {
        $('#prod-details').html('show something');
        previous1 = this.value;
    }); 

}); //$(document).ready

<div id="wrapper"> </div>
<div id="prod-details"> </div>

Answer 1

事件委托，将选择器绑定到DOM准备好的元素.on()

$("#wrapper").on("change", ".ordertype", function() {
    //do your stuff!
});

Answer 2

您需要将jQuery on()与事件委派一起使用，您可以将事件委托给动态添加元素的父级。

$('#wrapper').on('change', '.ordertype', function() {    
    $('#prod-details').html('show something');
    previous1 = this.value;
});

委托活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序reference。

Answer 3

你有两个选择：

事件委托（正如之前所说的其他答案，哪个更好）

在元素创建时和追加到DOM后添加事件侦听器

var getOptionsForm = function() { 

    var form = $('<select class="ordertype"> <option value='1'> prod1 </option><option  value='2'> prod2 </option> </select>');
    $('#wrapper').append(form);

    $(".ordertype").focus(function () {
        // Store the current value on focus and on change
        previous1 = this.value; //old select value
    }).change(function() {
        $('#prod-details').html('show something');
        previous1 = this.value;
    });}
}

如果动态创建选择器，如何实现jquery .change代码？

3 个答案:

委托活动