Question

此代码用于弹出一组复选框，这些复选框是在选择值为Up的radiobox时生成的。

// Experiment
        $("input[name='production-level']").on('change', function() {
            var production = $(this).val();
            var result = '';

            if(production == 'Up') { 
                result  = '<p class="question">Reasons why it is '+ production +'. Click as many as apply.</p>'
                        + '<input type="checkbox" name="production-rsn[]" value="Increase in demand" required>Increase in demand <br/>'
                        + '<input type="checkbox" name="production-rsn[]" value="Expected increase in demand">Expected increase in demand <br/>'
                        + '<input type="checkbox" name="production-rsn[]" value="Fullfillment of past orders">Fulfillment of past orders <br/>'
                        + '<input type="checkbox" name="production-rsn[]" value="Increased marketing activity">Increased marketing activity <br/>'
                        + '<input type="checkbox" name="production-rsn[]" value="other" />Other';    
            } 

            $('#production').html(result);
         });

此代码用于在选中/勾选上述函数value="other"生成的代码中包含的复选框时弹出文本框。问题是它不会被追加！

$("input[name='production-rsn[]']").on('change', function () {
             var result = '';
             //check if the selected option is others
             if (this.value === "other") {
                 result = '<input id="productionOther" maxlength="30" minlength="3" name="production-other" type="text"/>';
             }

             $('#production').append(result);
        });

问题是文本框不会被追加！有什么想法吗？

Answer 1

在动态创建元素时，您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

即

$(document).on(event, selector, callback_function)

实施例

$('#production').on('change', "input[name='production-rsn[]']", function(){
    //Your code

});

代替document，您应该使用最近的静态容器。在你的情况下是'#production'

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

Answer 2

由于您的input元素已动态添加到DOM，因此在您将这些事件附加到这些新事件之前，所有事件都不可用于这些新创建的input，您可以使用 event delegation ：

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是否存在，或将来是否存在。

$('#production').on('change', "input[name='production-rsn[]']", function () { var result = ''; //check if the selected option is others if (this.value === "other") { result = '<input id="productionOther" maxlength="30" minlength="3" name="production-other" type="text"/>'; } $('#production').append(result); });

为jquery事件使用未声明的属性

2 个答案: