Question

通过把手编制，我有一个主题列表。您可以单击该主题，然后通过ajax调用，它将创建一个包含更多信息的弹出窗口。你可以关闭弹出窗口，但是在第一次之后，页面上没有任何东西可以点击（甚至是与此无关的按钮。我搜索了我的SO主题，但没有任何东西让我得到答案。我注意到没有ajax附加到click事件的调用，每次都会有效。

如果每次点击都会让点击发生，甚至不是第一次？谢谢!!

<div id="listing-topics" class="wrapper_form_dark">
</div>


<script id="listingTopics" type="text/x-handlebars-template">
    <div class="wrapper_individual_listing_topic wrapper_form_dark">
        <div class="wrapper_listing_topics form_section">
          <a href={{link}} class="listing-topics">{{title}}</a><svg><use xlink:href="#starEmpty"/></svg>
        </div>
        <hr>
    </div>
</script>



  <script id="popUpTopic" type="text/x-handlebars-template">
  <div class="popUpTopic">
    <div class="topicClose">
    </div>
    <div class="show_topic wrapper_individual_listing_topic wrapper_form_dark" id='show_topic'>
      <h2 class="topic_title listing-topics">{{title}}</h2>
      <img src='/assets/icons/heart.png' class={{heartClass}}>
      <h6 class="topic_body">{{body}}</h6>
    </div>
  </div>
  </script>

js file：

 var lookUpTopic = function(url)    {
    console.log(url);
    var source = $("#popUpTopic").html();
    var compiled = Handlebars.compile(source);
    $.ajax({
        url: url,
        dataType: "json",
        type: 'GET',
        success: function(result)   {

            var id = result.id;
            var title = result.title;
            var body = result.body;
            var level = result.level
            console.log(level);
            var heartClass = "unfavorited_heart_icon"

            var favlink = '/exchanges/' + id + '/favorite'; 
            var exchangeInfo = {title: title, body: body, heartClass: heartClass};
            var template = compiled(exchangeInfo);

            $('.topic-wrapper').append(template);
        },
        error: function(err)    {
            console.log(err);
        }
    });
}

var ready = function () {

$(document).on('click', '.listing-topics', function(e)  {
  e.preventDefault();
  console.log(this);

  lookUpTopic(this.href);

  });


$(document).on('click', '.topicClose', function(e)  {
   console.log("clicky click!");
    //based on other SO I have also tried remove(), but does not work
    // $('.topicClose').remove();
    // $('.show_topic').remove();
    $('.topicClose').css("display", "none");
    $('.show_topic').css("display", "none");
 })


    $.ajax({
            url: '/exchanges',
            dataType: 'json',
            type: 'GET',
            success: function(result)   {
                // console.log(result);
                console.log("exchanges loaded");


                //COMPILE HANDLEBARS TEMPLATE FOR POPUP
                var source = $("#popUpTopic").html();
                var compiled = Handlebars.compile(source);

                //COMPILE HANDLEBARS TEMPLATE FOR LISTING TOPICS
                var listingSource = $("#listingTopics").html();
                var compiledTopics = Handlebars.compile(listingSource);


                for(var i = 0; i < result.length; i++)  {
                    var title = result[i].title;
                    var level = result[i].level;
                    var id = result[i].id;
                    var favlink = '/exchanges/' + id + '/favorite'; 
                    var link = '/exchanges/' + id;
                    var exchangeInfo = {title: title, link: link};
                    var template = compiledTopics(exchangeInfo);
                    $('.topic-wrapper').append(template);

              };

            },
            error: function(err)    {

            }
        });



var source = $("#popUpTopic").html();
var compiled = Handlebars.compile(source);

//COMPILE HANDLEBARS TEMPLATE FOR LISTING TOPICS
var listingSource = $("#listingTopics").html();
var compiledTopics = Handlebars.compile(listingSource);



}

$(document).ready(ready);
$(document).on("page:load", ready);

Jquery click事件仅对ajax调用有效一次

0 个答案: