Unable to show div element on click of dynamically added li

Question

I have a label <label onclick="functionCall()">All Models</label>. On the click of this label i dynamically add ul to div

$("#MetricsTypeYearModelList").append('<ul class="modal__list mCustomScrollbar" id="MetricsTypeYearModelListUl"></ul>');

"MetricsTypeYearModelList" is the id of my div. After this i loop over a JSON object and add li dynamically to this ul

for (var i = 0; i < metricsTypeYearModel.length; i++)
    {
        var obj = metricsTypeYearModel[i];
        if(i == 0)
            $("#MetricsTypeYearModelListUl").append('<li data-name='+obj.ModelTypeName+' data-value='+obj.ModelTypeID+' data-id='+obj.ModelTypeID+' class="pModel active"><a href="#" id="TestClick"> '+obj.ModelTypeName+'</a></li>');
        else
            $("#MetricsTypeYearModelListUl").append('<li data-name='+obj.ModelTypeName+' data-value='+obj.ModelTypeID+' data-id='+obj.ModelTypeID+' class="pModel"><a href="#"> '+obj.ModelTypeName+'</a></li>');
    }

After loading this, i want to click the first element of li. $( '#TestClick' ).trigger( "click" ); Problem is that when i click on the label, the div does not show up, but when i remove $( '#TestClick' ).trigger( "click" ); the div shows up. What can be the possible issue.

JS is:

$(document).on('click', 'li.pModel', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var identifier = fetchIdentifier(this);
            var iHandle = $("#" + identifier); // fetch container

            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            // $('li.mModel').removeClass('active');

            iHandle.find('ul li.mModel').removeClass('active');
            iHandle.find('ul li.cModel').removeClass('active');
            iHandle.find('ul li.mModel').fadeOut();
            iHandle.find('ul li.cModel').fadeOut();

            iHandle.find('ul li.mModel[data-parentid="' + $(this).data('id') + '"]').fadeToggle();
            iHandle.find('ul li.mModel[data-parentid="' + $(this).data('id') + '"]:first').addClass("active");



            iHandle.find('ul li.cModel').fadeOut();
            iHandle.find('ul li.cModel[data-parentid="' + iHandle.find('ul li.mModel.active').data('id') + '"]').fadeToggle();
        });

I want to call this JS method from the code for the first li element when i click on the label i.e. i want to click the first li element programmatically.

Dynimacally inserted objects don't belong to $ object that is instantiate when you include jquery. So, you have to delegate your event from a known element through the element you want to activate — Jean-Luc Aubert, Sep 28 '18 at 11:26

Hary · Answer 1 · 2018-09-28T11:51:35.040

0

You can use $("#TestClick").click() to explicitly call the click event.

Use .on to create bindings on dynamically created elements.

function functionCall()
{

  $("#MetricsTypeYearModelList").append('<ul class="modal__list mCustomScrollbar" id="MetricsTypeYearModelListUl"></ul>');

  var metricsTypeYearModel =  ["List Item 1","List Item 2","List Item 3"];

  for (var i = 0; i < metricsTypeYearModel.length; i++)
  {
    var val = metricsTypeYearModel[i];
    var id = i==0 ? 'id="TestClick"' : '';
    var li = '<li data-name='+val+' data-value='+val+' data-id='+val+' class="pModel active"><a href="#" '+ id +'> '+val+'</a></li>'
    
    $("#MetricsTypeYearModelListUl").append(li);
  }

  $("#TestClick").on('click', function(){

    console.log($(this).text() + " invoked the click");

  });

  $("#TestClick").click();

}

#MetricsTypeYearModelList
{
 border: solid 1px red;
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<label onclick="functionCall()">All Models & Click Here</label>

<div id="MetricsTypeYearModelList">
This is DIV content and it shows up
</div>
</body>
</html>

edited Sep 28 '18 at 11:51

answered Sep 28 '18 at 11:29

Hary

5,690
7
42
79

I already have call backs associated with click. Clicking on any element does work fine, but here i want to click the first element automatically through code. – Waleed Naveed Sep 28 '18 at 11:35
@WaleedNaveed, Please check the updated answer – Hary Sep 28 '18 at 11:39
My problem is that when a write "$("#TestClick").click();", the div does not show up. I am showing a div on the click of label – Waleed Naveed Sep 28 '18 at 11:45
Possibly some scripts errors need to be there. Here it works fine. Please post the full code so that we could help you – Hary Sep 28 '18 at 11:52
I have added the JS too . @mbharanidharan – Waleed Naveed Oct 01 '18 at 07:04

Unable to show div element on click of dynamically added li

1 Answers1