動態內容的click事件未在首次點擊時觸發

Question

我正在嘗試在我的網站中實現關鍵字搜索。 搜索結果包含一個錨點以獲取詳細視圖。 並且在錨點的click事件中顯示了一個彈出窗口。 但我的問題是，此彈出窗口不會在首次單擊時呈現。 如果我再次單擊該鏈接，將彈出彈出窗口。 我在這里粘貼我的搜索窗口和腳本的屏幕截圖。 有人請幫助我糾正此問題。

劇本：

function showAdvancedSearch(value) {

  var searchResults = '<div class="scrollbar-inner">';
  var status = "";
  var color = "";
  $.ajax({
    url: base_url + 'Panel/quickSearch',
    type: 'POST',
    data: {
      q: value
    },
    async: false,
    success: function(result) {
      result = $.parseJSON(result);

      for (var i = 0; i < result.length; i++) {

        if (result[i]['TargetedUserHolded'] == 'Y') {
          status = 'Hold';
          color = 'yellow';
        } else if (result[i]['MeetingExecuted'] == 'Y') {
          status = 'Completed';
          color = 'green';
        } else if (result[i]['MeetingCancelled'] == 'Y') {
          status = 'Cancelled';
          color = 'blue';
        } else {
          color = 'blue';
        }
        var d = new Date(result[i]['MeetingStartDateTime']);
        var amOrPm = (d.getHours() < 12) ? "AM" : "PM";
        var hour = (d.getHours() < 12) ? d.getHours() : d.getHours() - 12;
        var minutes = d.getMinutes();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        var year = d.getFullYear();

        searchResults += '<div class="board-details ' + color + '">' +
          '<div class="board-head">' +
          result[i]['FirstName'] + ' Scheduled Meeting <em>(' + status + ')</em>' +
          '</div>' +
          '<p>' + result[i]['MeetingNote'] + '.</p>' +
          '<div class="board-flex">' +
          '<a href="javascript:void(0)" class="view-details"  data-meeting-id="' + result[i]['MeetingID'] + '">view details</a>' +
          '<span class="time">' + day + '-' + month + '-' + year + ' ' + hour + ':' + minutes + ' ' + amOrPm + '</span>';
        if (status == 'Hold') {
          searchResults += '<div class="pull-right">' +
            '<a href="javascript:void(0)" class="action accept" title="Accept"></a>' +
            '<a href="javascript:void(0)" class="action reject" title="Reject"></a> ' +
            '</div>';
        }
        searchResults += '</div>' +
          '</div>';
      }
    }
  });
  searchResults += '</div>' +
    '<a href="' + base_url + 'advanced-search" class="advanced">advanced search</a>';

  $('.search-inner').html(searchResults);





  TweenLite.set($('#quick-search').parent().find('.search-inner'), {
    display: 'block'
  });
}
$(document).on('click', 'a.view-details', function() {
    alert(1);    
});

僅對於動態添加的內容會發生此問題。 因為我試圖在另一部分（頁面加載中加載的內容）中觸發相同的視圖詳細信息事件，並且其工作正常。

更新
我刪除了一些代碼以便於理解。 警報功能在第一次單擊中不起作用，因為事件不是在第一次單擊中觸發

Answer 1

您可以做兩件事：

1. 創建元素后添加click事件處理程序
2. 將onclick函數傳遞到視圖細節中，然后處理單擊

快樂編碼

Answer 2

嘗試在document.ready中單擊文檔

我希望它能起作用

$(document).ready(function(){
     $(document).on('click', 'a.view-details', function() {
     //your code
     });
});

或者您可以嘗試在showAdvancedSearch（）函數末尾重新綁定click事件

$("a.view-details").bind("click", function(){
    alert("anchor is clicked");
});