0

I have multiple rows, inside the rows there is some functionality like to increase decrease values, checkbox, price etc..based on price i am sorting the rows. it is generating properly but after creating the row internal functionality not working.

HTML Code(Clicking on private):

var categorysort = ["0 - 25", "25 - 50", "50 - 150", "150 and over"];
/images/up_arrow.png"> category

jQuery Code:

/* Sort by:- private start */   
$('.sort-by .private').on('click', function(){
    var items = $(".renderedItem");
    var privatestatus = "Private";
    $(".categorystatus").html("");      
    if(privatestatus = "Private"){
        var itemMainDiv = "<div style='' aria-expanded='true' id='categorylist0' class='panel-collapse collapse privatediv' />" ;
    }
    var collapsiblepanel = $( "<div class='collapsiblepanel collapsibleParentDiv' style='display:none'/>" ).append(
        $( "<div class='panel panel-default' />" ).append(
            $( "<div class='panel-heading' />").append(
                $('<div class="panel-title" />').append(
                    $('<div class="pull-left categoryblock" />').append(
                        $('<span class="categorytext" />').text(privatestatus),
                        $('<span class="link visible-xs">').append(
                            $('<a href="#" />').text('view checklist')
                        )                               
                    ),
                    $('<span class="collapseexpand pull-right">').append(
                        $('<a class="collapsed" data-target="#categorylist0" data-toggle="collapse" href="#" aria-expanded="true"/>')
                    )
                )
            ),
            $(itemMainDiv)
        )
    );
    $(".categorystatus").append(collapsiblepanel);  

    items.each(function(index) {
        item = $(this);
        itemtype = item.attr("itemtype");

        if(itemtype == "Private") {
            $(".privatediv").append(item);              
        }
    });     

    var collPnlDivs = $('.collapsiblepanel');

    collPnlDivs.each(function( index ) {
        if($(this).find('.renderedItem').length > 0){           
            $(this).show();
        }           
    });     
}); 
/* Sort by:- private end */
Rohit
  • 1
  • 1

1 Answers1

0

This is likely because when you dynamically load the content, you are inserting it into the page AFTER you have installed event handlers. Thus, there are no event handlers on the dynamic content.

The usual solutions are to:

  1. Install the event handlers after you load the dynamic content.

or

  1. Switch to delegated event handling which will work with dynamically created content.

In delegated event handling, you bind the event to a parent that exists at the time you install the event handlers (even though the child content does not yet exist) and then you use event bubbling to see events that happen in the child objects that are later dynamically loaded. jQuery makes this all quite easy if you use the correct form of .on().

You can read more about delegated event handling in these references:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

JQuery Event Handlers - What's the "Best" method

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • All tried all the possible way using the delegate. some thing going wrong dont know what. – Rohit Oct 15 '15 at 07:27
  • @Rohit - we can't help you figure out what you did wrong when you tried delegated event handling if you don't disclose the exact code you tried. It works when done properly. It should be fairly well explained in the references in my answer and in the [jQuery page for `.on()`](http://api.jquery.com/on/). – jfriend00 Oct 15 '15 at 07:32
  • actually when i load the page, functionality works fine but after sorting the row, the inner functionality stops working. – Rohit Oct 15 '15 at 08:16
  • What do you mean by "Install the event handlers after you load the dynamic content"? – Rohit Oct 15 '15 at 09:25
  • @Rohit - Your "sort" function is recreating new content from scratch (entirely new DOM elements).That new content will not have any event handlers on it. So, if you expected clicks in that content to do something, then there will not be any handlers to make the click events work. Somewhere in your code (which you do not show us), you have code that installs click event handlers on items to make clicks do something. Those event handlers only apply to the DOM elements that existed at the moment you ran it. So they apply to the original content, but not the newly replaced and sorted content. – jfriend00 Oct 15 '15 at 21:08
  • @Rohit - if you disclose the code that makes the clicks in this content work, I can suggest a more specific fix so it continues to work after the sort. – jfriend00 Oct 15 '15 at 21:08
  • Actually we have created some component like stepper in the other javascript file and we load it at the time of page load. but private and public toggle and checkbox functionality are in the same javascript file. please suggest. also if it is not installing handler while dynamically creation of the conetnt than how to "Install the event handlers after you load the dynamic content". Thanks – Rohit Oct 16 '15 at 05:32
  • @Rohit - you find the code that hooks up the event handlers and you either change it to use delegated event handling or you isolate it into a function that you can call after you recreate the new content (so that it will hook up new event handlers to the new content). Or, you change your sort routine so that it actually sorts existing DOM content rather than recreating new content (thus the event handlers stay attached). – jfriend00 Oct 16 '15 at 06:58
  • Please have a look in to the link: https://jsfiddle.net/1bzats85/10/ here when i click on the "private" link, it creates the same structure again but without any event handler. please suggest for the same. i tried using $.proxy() but also not working. – Rohit Oct 16 '15 at 08:49
  • Please help me solving the problem – Rohit Oct 16 '15 at 08:49
  • @Rohit - I can't fix the event handler code without seeing that code and knowing exactly which event handlers are having a problem. Also, the code in the jsFiddle does not run so I can't actually debug it. Another option would be to stop replacing the DOM elements with new DOM elements on your sort (just rearrange the existing elements). But, I don't understand the objective of your sort so don't know how to propose that type of fix. This is way frustrating for me because you just don't provide enough information. – jfriend00 Oct 16 '15 at 17:04