CODEWITHSUNDEEP
javascriptjquery
Graham
Graham

Reputation: 1473

Using change(); twice for same div causing problems

UPDATE** This is probably too much code. But... heres the situation. I have a search at the top of the page. I use some fancy jQuery so when you click on a select option(#categoris) a new select option(#type) appears next to it.

Now, I have another change event. On keyup of any text field or change of any select, an ajax search is fired. This works on everything but #type. #type is the select option that pops out from #categories on change(); So, I need change to work on #type.

Here's the code pop out the #type select option. You can just skim. Code works fine...

    $(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);
                }
            });

Here, is the change();. #type should instantiate the search on change(); But, doesn't either because it's made from #categories on change();. Or, because I'm using change(); twice.

                // *** 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);
                                });

                        }



                });
        });

Upvotes: 0

Views: 121

Answers (1)

BCsongor
BCsongor

Reputation: 869

I think you should try the live() function. Because the live function handle the dynamically created elements but you can read more on documentation :)

So you can try something like this:

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

Please read the manual because I see now that the .live() function is deprecated for jquery 1.7, and choose the appropiate function for your jquery version.

I hope this resolve your problem, and sorry for my english :">

Upvotes: 1

Related Questions