Jquery not working on Ajax load

[muhammed]

I am using ajax filter. when I clicked on checkbox other jquery functions are not working. even the filter panel’s trigger also not working.
here is the ajax script

<script type="text/javascript"><!--
				$(document).on('change',function(){
                    filter = [];
                    $('input[name^=\'filter\']:checked').each(function(element) {
                    filter.push(this.value);
                    });
					href = '{{action}}&filter=' + filter.join(',');
					div = ' #content';
					load_href = href + div;
					$(div).load(load_href, function() {
						$(this).children(':first').unwrap();
                        // Product List
                        $('#list-view').click(function() {
                            $('#content .product-grid > .clearfix').remove();

                            $('#content .product-grid').attr('class', 'product-layout product-list col-lg-3 col-md-3 col-sm-4 col-xs-6');
                            $('#grid-view').removeClass('active');
                            $('#list-view').addClass('active');

                            localStorage.setItem('display', 'list');
                        });

                        // Product Grid
                        $('#grid-view').click(function() {
                            // What a shame bootstrap does not take into account dynamically loaded columns
                            var cols = $('#column-right, #column-left').length;

                            if (cols == 2) {
                                $('#content .product-list').attr('class', 'product-layout product-grid col-lg-2 col-md-2 col-sm-3 col-xs-6');
                            } else if (cols == 1) {
                                $('#content .product-list').attr('class', 'product-layout product-grid col-lg-2 col-md-2 col-sm-3 col-xs-6');
                            } else {
                                $('#content .product-list').attr('class', 'product-layout product-grid col-lg-2 col-md-2 col-sm-3 col-xs-6');
                            }

                            $('#list-view').removeClass('active');
                            $('#grid-view').addClass('active');

                            localStorage.setItem('display', 'grid');
                        });

                        if (localStorage.getItem('display') == 'list') {
                            $('#list-view').trigger('click');
                            $('#list-view').addClass('active');
                        } else {
                            $('#grid-view').trigger('click');
                            $('#grid-view').addClass('active');
                        }
					});
					setLocation(href);
					return false;
    });
				function setLocation(curLoc){
					try {
					  history.pushState(null, null, curLoc);
					  return;
					} catch(e) {}
					location.hash = '#' + curLoc;
				}
				//--></script>

[m_hutley]

@muhammed

return false;
$(‘#loadingmessage’).hide();

Well for starters that last line will never execute because you’ve put it after a return.

[muhammed]

@m_hutley how should i use then?

[m_hutley]

You would put the hide command before the return.

[muhammed]

@m_hutley can you please help me resolve my actual problem
when I am using $(div).load(load_href, function() { other jquery functions are not working
what would be the possible solution for that?

[m_hutley]

Do you have an example of this page you can link us to? Cause reading the code without the context in this case isn’t entirely clear to me what the problem is.

[muhammed]

now I don’t have a working example. I am working on my development server.
but maybe $(div).load(load_href, function() { may be the problem
when i am changing it $(div).on("load", load_href, function() { other jquery triggers are working but this function is not working

[m_hutley]

on load and load are not the same thing.
.load() is a function that goes and gets HTML from the target url, and then processes it.
.on('load',....) is an event trigger based on the page loading, and does not fetch any additional data.

Your Network debug window should be showing you that when you make a change to the document a request is being sent. Does that request look accurate and good?