使用動態創建的DOM元素在點擊時添加樣式

Question

我想在選中div內包含的圖像周圍創建邊框，然后在取消選中它時將其刪除。 如何獲取所選div的ID？

 function displayLive()
            {
              var previous = null;
              var current = null;
              setInterval(function()
              {
                $.ajax({
                  url: '/showLive',
                  dataType: 'json',
                  contentType: 'application/json',
                  success: function(response) 
                  {
                    current = JSON.stringify(response);
                    if(previous !== current)
                    {
                      var obj = JSON.parse(response);
                      console.log(obj);
                      for(var i = 0; i < obj.active.length; i++)
                      {
                        if($(document.getElementById(obj.active[i].userNameData)).length == 0)
                        {
                          if(obj.active[i].active === true)
                          {
                            $('.left').prepend($('<div/>', {class: 'profTemp', id: obj.active[i].userNameData}).append(
                              $('<img/>', {src: obj.active[i].profiler, width: 40, height: 40}),
                              $('<span/>', {text: " " + obj.active[i].userNameData}))); 
                          }  

                        }
                        else if(obj.active[i].active === false)
                        {
                          $(document.getElementById(obj.active[i].userNameData)).remove();
                          console.log("getting in false");
                        }
                      }
                    }
                  }
                }); 
                previous = current; 
              }, 2000);   
            }

這是一個模板

Answer 1

通過$(document).on('click', '.profTemp', function() {})分配點擊處理程序$(document).on('click', '.profTemp', function() {})以觸​​發文檔上的click事件，以便它將與動態添加的元素一起使用，然后在div並將其用作是否單擊狀態，並引用該類以繪制邊框。

 $('body').append('<div class="profTemp"> <img class="img" src="https://i.stack.imgur.com/2C22p.jpg"></div>'); $(document).on('click','.profTemp',function() { $(this).toggleClass('selected'); }) 

 .profTemp { display: inline-block; } .selected img { border: 5px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>