点击事件无法触发弹出框答案

【问题标题】：Unable to trigger popup box on click event点击事件无法触发弹出框
【发布时间】：2015-10-19 09:13:38
【问题描述】：

我正在将 ajax 请求的结果打包到 div 并附加到页面中的主 div。所以如果结果数组返回空，我想提醒用户，说没有找到结果，并提供一个链接供他们点击。当他们单击按类别携带产品的弹出框时，会弹出。这里需要注意的重要一点是，产品是通过 php 和 ajax 脚本派生的。

所以当我使用 onclick 事件或直接使用时，什么都没有发生！！！。但是，如果我调用 empty 或 HTML pop up 它会起作用。如果我在页面加载或 ajax 成功函数中触发它，包含弹出窗口的相同 php 脚本也将起作用。所以我不明白为什么只有点击它不起作用？

这是我想在“点击”事件上触发的弹出窗口

 <section id="browse-search-popup" class="mfp-hide white-popup">
 <h1>Browse Courses</h1>
 <a href="">Can't find what you're looking for? Tell us here!</a>
 <h2>First, pick a learning Zone:</h2>
 <div class="row">
   <div class="small-12 medium-8 large-8 medium-centered large-centered columns">
       <ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-2">
       <?php
          $tutor =  new register();
          $data = $tutor->get_maincat();
          $i=0;
          foreach($data as $k=>$v)
          {
              $i++;
              ?>

              <li><div class="mainCat_<?php echo $i;?>" id="<?php echo $v['main_cat_id'];?>"><?php echo $v['main_cat_name'];?></div></li>

              <?php
          }
       ?>
       </ul>
   </div>
 </div>


<h2>Then, pick a field:</h2>
<div class="row">
    <div class="small-12 medium-12 large-12 columns" id="cat">
    </div>
</div>

<h2>Finally, choose your Course:</h2>
<div class="row">
    <div class="small-12 medium-12 large-12 columns" class="choosen_subjects">
    </div>
</div>

<div class="row">
    <div class="small-12 medium-12 large-12 columns" id="sub">
    </div>
</div>
<input type="submit" id="done" value="Done">
 </section>

Ajax 请求

$("#search_tutor").submit(function() {
    var data = {
        "action": "test"
    };
    var subject = $("#subject").val();
    data = $(this).serialize() + "&" + $.param(data);

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "/fetch_tutor.php", //Relative or absolute path to response.php file
        data: data,
        success: function(data) {
            $("#contents img.loading").remove();
            var sizy = data.length;
            if(sizy ==0) {
                console.log("sorry, cannot locate");
                $(".simply-popup-link").trigger("click");
                $("#simply-popup").empty();

                //This is where I want to trigger the on click
                $("#simply-popup").append("Unable to locate the subject you entered, please <a href='#'  onclick='browse("+sizy+")' class='yellow'>Browse</a>");

            }
            console.log("size= "+data.length);
            var j=0;
            for (i = 0; i < data.length; i++) {
                ........................
                ......................

浏览功能：

function browse(param) {
    //this would work
    /* $(".simply-popup-link").trigger("click");
       $("#simply-popup").empty();
       $("#simply-popup").append("test only"); */

    // but not this
    $(".browse-search-popup-link").trigger("click");
}

我尝试像这样将页面加载到一个空的弹出框 ($("#simply-popup")) 中，但也不起作用：

 $("#simply-popup").load('search/browse.php');

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

改变

$("#simply-popup").append("Unable to locate the subject you entered, please <a href='#'  onclick='browse("+sizy+")' class='yellow'>Browse</a>");

到

$("#simply-popup").append("Unable to locate the subject you entered, please <a href='#' class='yellow browse'>Browse</a>");

为此编写单独的代码

$('body').on('click', '.browse', function() {
    $('.browse-search-popup-link').click();
});

【讨论】：

【解决方案2】：

你不能在追加后调用那个函数吗：

$("#simply-popup").append("Unable to locate the subject.....");
browse(sizy);// call it here.

或者当你将它附加到元素中时，你可以调用点击：

$("#simply-popup").append("Unable to locate the subject.....");
$("#simply-popup a").click();

$(document.body).append('<a href="#" onclick="browse('+1+')">browse value is 1</a>');
$(document.body).find('a').click();

function browse(num){ $(document.body).find('p').html("<pre>"+num+"</pre>");}

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

【讨论】：