Question

我有一个标签<label onclick="functionCall()">All Models</label>。单击此标签后，我将ul动态添加到div

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

“ MetricsTypeYearModelList”是我的div的ID。此后，我遍历一个JSON对象并将li动态添加到此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>');
    }

加载此后，我要单击li的第一个元素。 $( '#TestClick' ).trigger( "click" ); 问题是，当我单击标签时，div不会显示，但是当我移除$( '#TestClick' ).trigger( "click" );时 div出现。可能是什么问题。

JS是：

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

当我单击标签时，我想从第一个li元素的代码中调用此JS方法，即我想以编程方式单击第一个li元素。

Answer 1

您可以使用$("#TestClick").click()显式调用click事件。

使用.on在动态创建的元素上创建绑定。

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>

单击动态添加的li后无法显示div元素

1 个答案: