1

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

我的问题是我很难在框中实现产品详细信息的显示；不知何故，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>
4

3 回答 3

0

事件委托，将选择器绑定到 DOM 中确实存在的元素.on()

$("#wrapper").on("change", ".ordertype", function() {
    //do your stuff!
});
于 2013-10-10T15:11:26.177 回答
0

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

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

委托活动

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要，参考.

于 2013-10-10T15:11:57.593 回答
0

你有 2 个选择：

  1. 事件委托（如前所述，其他答案更好）

  2. 在元素创建时和附加到 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;
    });}
}
于 2013-10-10T15:18:46.957 回答