动态内容的点击事件未在第一次点击时触发答案

【问题标题】：click event for dynamic content not triggering in first click动态内容的点击事件未在第一次点击时触发
【发布时间】：2018-06-28 07:45:38
【问题描述】：

我正在尝试在我的网站中实现关键字搜索。并且搜索结果包含一个锚点以获取详细视图。它在锚点的点击事件中显示一个弹出窗口。但我的问题是，这个弹出窗口不会在第一次点击时呈现。如果我再次单击该链接，弹出窗口将会出现。我在这里粘贴我的搜索窗口和脚本的屏幕截图。有人请帮我纠正这个问题。

脚本：

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

此问题仅发生在动态添加的内容中。因为我试图在另一个部分（页面加载中加载的内容）触发相同的视图详细信息事件并且它工作正常。

更新
为了便于理解，我删除了一些代码。首次单击时警报功能不起作用，因为该事件未在首次单击时触发

【问题讨论】：

除了您描述的问题，删除async: false。这是非常糟糕的做法，以至于浏览器会在控制台中显示警告，告诉你不要这样做。正确使用回调模式
授权到位：$(document).on('click', 'a.view-details', function() {
@RoryMcCrossan 好的。我从我的代码中删除了这个
但是为什么function defaultPopup(part) {在click函数里面呢？
@mplungjan defaultPopup(part) 未在点击事件中定义。我只是从点击事件中调用该函数

标签： javascript jquery ajax codeigniter

【解决方案1】：

你可以做两件事：

在创建元素后添加点击事件处理程序
将 onclick 函数传递到视图详细信息中，然后处理点击

愉快的编码

【讨论】：

【解决方案2】：

尝试在 document.ready 中单击文档

我希望它有效

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

或者您可以尝试像这样在 showAdvancedSearch() 函数末尾重新绑定点击事件

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

【讨论】：

还是一样的:(
你能在控制台看到什么吗？