Example

Question

只有从下拉菜单中选择某个值时，我才想显示div（在这种情况下，它是custom-css）

在小提琴上（http://jsfiddle.net/obmerk99/8xnzh/1/）它可以正常工作......

jQuery(document).ready(function() {

       jQuery("#k99-custom-1").change(function () {
         jQuery("#k99-custom-1 option:selected").each(function ()
        {
            if( jQuery(this).attr("value") == "custom-css")
            {
                jQuery("#customcss").show();
            }
            else
            {
                jQuery("#customcss").hide();
            }
        });
    }).change();
});

但是在实际页面中，选择下拉列表实际上是通过“添加选项”按钮动态生成的，因此页面加载（文档就绪）上不存在某些（第一个）选择，我认为这就是原因它不起作用..

在此处查看完整的操作（不工作）：http://jsfiddle.net/obmerk99/ZcAzy/1/

如果选择“custom-css”值，为了显示div，我做错了什么？（现在它被设置为仅与第一个（或第二个）一起工作 - 但是使它适用于所有添加的选择列表会很棒。）

Answer 1

尝试使用delegation，如下所示：

jQuery(function() {
    //  Here, `.on` is used in its `delegate` form, where it asigns an event to any
    //    element matching the selector
    //    regardless when it was added to the DOM
    jQuery(document).on('change', "[id^='k99-custom-']", function(e) {
        jQuery("[id^='k99-custom-'] option:selected").each(function(i) {
            if (jQuery(this).attr("value") == "custom-css") {
                jQuery("#customcss").show();
            }
            else {
                jQuery("#customcss").hide();
            }
        });
    })
})

我刚刚在另一个答案的评论中注意到，你尝试过这样的事情。你做错了的是将event的选择器[id^='k99-custom-']委托给[id^='k99-custom-']，正如你所看到的那样，这本身就是document。要委派，您需要将父元素或$(document).on(...本身作为标志，如我的示例所示。最常见的用途是使用{{1}}

Example

详细了解.delegate及其.on形式！

Answer 2

您需要使用on函数而不仅仅change来绑定动态元素。

$('body').on('change','#k99-custom-1',function(){
  //function here
});

根据选择框更改DIV可见性

2 个答案:

Example