使用change();两次因同一个div导致问题

时间:2011-11-16 07:11:49

标签: javascript jquery

更新**这可能是代码太多了。但是......继承人的情况。我在页面顶部搜索。我使用一些花哨的jQuery,所以当你点击一个选择选项(#categoris)时,旁边会出现一个新的选择选项(#type)。

现在,我有另一个更改事件。在任何文本字段的键盘或任何选择的更改时,将触发ajax搜索。这适用于除#type之外的所有内容。 #type是在change()上从#categories弹出的select选项;所以,我需要改变才能在#type上工作。

这里的代码弹出#type select选项。你可以撇去。代码工作正常......

    $(document).ready(function() {

    $('#category').change(function() {

        var category = $('#category').val();
        //CATEGORIES...

            // any_type / NULL
            var any_category = '<div id="type_holder_line"></div>';
            // Music
            var music = '<div id="type_text">Type</div><img src="app/search/images/arrow.gif" id="arrow" /><select name="music_type" id="type"><option value="any_style" selected="selected">Any Style</option><option value="Jazz">Jazz</option><option value="Rock">Rock</option></select>';

            // Restaurants
            var restaurant = '<div id="type_text">Type</div><img src="app/search/images/arrow.gif" id="arrow" /><select name="restaurant_type" id="type"><option value="Japanese">Japanese</option><option value="Mexican">Mexican</option></select>';

            if($(this).val() == 'Any Category') {
                $('#type_holder').html(any_category);
                }

            if($(this).val() == 'music_page') {
                $('#type_holder').html(music);
                }
            if($(this).val() == 'restaurant_page') {
                $('#type_holder').html(restaurant);
                }
            });

这里是change();. #type应该在change()上实例化搜索;但是,不是因为它是由#categories on change();制作的。或者,因为我正在使用change();两次。

                // *** START *** keyup / change (for select option)
                $('#loc, #dist, #category, #type, #search_title').bind('keyup change', // HERE, #type is ignored because it's created from #categories on change(); function() {
                    var loc = $('#loc').val();
                    var dist = $('#dist').val();
                    var category = $('#category').val();
                    var type = $('#type').val();
                    var search_title = $('#search_title').val();



                    if(loc == '' && search_title != '') {

                        $.post('http://localhost/app/search/page_type/music_spot/search.name.php', {

                                                                  category:category,
                                                                  type:type,
                                                                  search_title:search_title

                                                                  },
                            function(data) {
                                $('#front_left').html(data);
                                });

                        }



                });
        });

1 个答案:

答案 0 :(得分:1)

我认为您应该尝试live()功能。因为实时函数处理动态创建的元素,但您可以阅读更多文档:)

所以你可以尝试这样的事情:

$('#loc, #dist, #category, #type, #search_title').live('keyup change', function(){
// code here
});

请阅读本手册,因为我现在看到jquery 1.7已弃用.live()函数,并为jquery版本选择适当的函数。

我希望这能解决你的问题,对不起我的英语:“&gt;