使用 jquery 动态生成链接上的 envent.target.id

Question

I generated dynamic links. means when users click country Links that country's cities are shown. I want envent.target.id of dynamiclly generated city link when it is clicked

 $(".countryName").children().on('click',()=>{ targetId=event.target.id; if(targetId=="country1"){ $("#cityName").html(""); $("#cityName").append('<a id="city1">city1</a>'); $("#cityName").append('<a id="city2">city2</a>'); } if(targetId=="country2"){ $("#cityName").html(""); $("#cityName").append('<a id="city3">city3</a>'); $("#cityName").append('<a id="city4">city4</a>'); } }); $(".cityName").children().on('click',()=>{ alert(event.target.id); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="countryName" > <a id="country1">country1</a> <a id="country2">country2</a> </div> <div class="cityName" id="cityName" > </div>

Answer 1

The dynamically generated elements will not have any event bind to them. To bind any event with them, you have bind event after the element is created and placed, in DOM.

The on() event listener creates city elements and place it in DOM. At the end of listener, the dynamically generated children are getting event bind to them.

In case you want to bind event just once and not on each click, you can do one thing. You can create and place all the elements in DOM. And hide/show them, according to your need.

 $(".countryName").children().on('click', () => { targetId = event.target.id; if (targetId == "country1") { $("#cityName").html(""); $("#cityName").append('<a id="city1">city1</a>'); $("#cityName").append('<a id="city2">city2</a>'); } if (targetId == "country2") { $("#cityName").html(""); $("#cityName").append('<a id="city3">city3</a>'); $("#cityName").append('<a id="city4">city4</a>'); } $(".cityName").children().on('click', () => { alert(event.target.id); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="countryName"> <a id="country1">country1</a> <a id="country2">country2</a> </div> <div class="cityName" id="cityName"> </div>