Question

我有一个jquery移动页面，其中click事件附加到一系列带有类选择器的元素。当我点击第一个元素时，一切都很好，但如果我更改页面并返回，则单击事件将触发但无法遍历DOM。这是简化版。

<div class="someSelector"></div>
<div class="someSelector"></div>
<script>
  $(function(){
    $(body).on('click','.someSelector',function(){
      alert('Hello World') // This works everytime
      alert($(this).parent().attr('id')) // This returns 'undefined' for the second time
    })
  });
</script>

所以，问题是，我无法使用click事件遍历DOM，通过从另一个页面返回后第二次单击相同的元素。如果我不导航到另一个页面，则不会发生此问题。以下是插入div[data-role="content"]

的页面的相关部分

{% for item in user_posts.object_list %}
   {% if item.share_with != 'share with none' %}
       {% if  item.type != 'status_update' %}
           <div class="post" id="post-{{ item.id }}">
              <div class="postInfoWrapper">
                  {% if item.posted_by.get_profile.get_profile_picture %}
                  <img class="user_photo" src="{{ item.posted_by.get_profile.get_profile_picture }}" height="50" width="50" />
                  {% else %}
                  <img class="user_photo" src="{{ STATIC_URL }}images/default_profile_picture.png" height="50" width="50"/>
                  {% endif %}
                  <div class="postInfo">
                      <p class="title">{{ item.title|striptags|capfirst }}</p>
                      <p class="publisher_info">Posted by <a class="user" href="/{{ item.posted_by.username }}/">Dr.{{ item.posted_by.get_full_name|capfirst }}</a> to
                      <span>
                          {% for speciality in item.relevance.all %}
                              {{ speciality.name }},
                          {% endfor %}
                      </span>
                      </p>
                      <span class="dated">{{ item.date_posted|addDate:user|naturalday:user }} at {{ item.date_posted|addDate:user|date:"h:i a" }}</span>
                      <a href="#postOptions" id="options" data-rel="popup" data-position-to="window" data-transition="flip" class="ui-alt-icon ui-nodisc-icon ui-btn ui-corner-all ui-icon-carat-d ui-btn-icon-notext ui-btn-inline">Delete</a>
                      <div data-role="popup" id="postOptions" data-theme="b">
                          <ul data-role="listview">
                              <li data-icon="edit"><a href="#">Edit</a></li>
                              <li data-icon="delete"><a href="#">Delete</a></li>
                              <li data-icon="action"><a href="#">Move to drafts</a></li>
                          </ul>
                      </div>
                  </div>
              </div>
              <div class="subject">
                 <div class="subject_full">
                 {% autoescape off %}
                 {{ item.subject|urlize }}
                 {% endautoescape %}
                 </div>
              </div>
       </div>
       {% else %}

        <div class="post" id="status_post_{{ item.id }}">
            <div class="imageGroup" style="display: none;">
            <div id='slider_qp_{{ item.id }}' class='swipe' data-role="none">
                    <div class='swipe-wrap'>
                        {% if item.image %}
                        <div>
                            <img src="{{ item.image.url }}" width="{{ item.get_image_width  }}" height="{{ item.get_image_height }}"
                                  class="quick-post-image"/>
                        </div>
                        {% endif %}
                        {% if item.image_2 %}
                        <div>
                            <img src="{{ item.image_2.url }}" width="{{ item.get_image_2_width  }}" height="{{ item.get_image_2_height }}"
                                  class="quick-post-image"/>
                        </div>
                        {% endif %}
                    </div>
            </div>
            </div>
            <div class="post_capsule">
                <div class="postInfoWrapper">
                    {% if item.posted_by.get_profile.get_profile_picture %}
                    <img class="user_photo" src="{{ item.posted_by.get_profile.get_profile_picture }}" height="50" width="50" alt=""/>
                    {% else %}
                    <img class="user_photo" src="{{ STATIC_URL }}images/default_profile_picture.png" height="50" width="50" alt=""/>
                    {% endif %}
                        <div class="postInfo">
                            <p class="publisher_info">
                                <a class="user" href="/{{ item.posted_by.username }}/">Dr {{ item.posted_by.get_full_name|capfirst }}</a>
                            </p>
                            <span class="dated">{{ item.date_posted|addDate:user|naturalday:user }} at {{ item.date_posted|addDate:user|date:"h:i a" }}</span>
                        </div>
                    </div>
                        <div class="subject_full">
                            <p>{{ item.status_update|striptags|urlize }}</p>
                                {% if item.image %}
                            <img src="{{ item.image.url }}" width="{{ item.image.width  }}" height="{{ item.image.height }}"
                                 style="cursor: pointer;border: 1px solid #aaa;margin-bottom: 5px;" class="quick-post-image"/>
                            {% endif %}
                            {% if item.image_2 %}
                            <img src="{{ item.image_2.url }}" width="{{ item.image_2.width  }}" height="{{ item.image_2.height }}"
                                 style="cursor: pointer;border: 1px solid #aaa;" class="quick-post-image"/>
                            {% endif %}
                        </div>
            </div>
        </div>
       {% endif %}
   {% endif %}{% endfor %}

剧本：

$(function(){
            $(document).on('click','.quick-post-image',function(e){
                var that = $(this);
                var elem = that.parents('.post').find('.swipe').attr('id');
                $('#swipeContainer').html($('#'+elem));
                $(':mobile-pagecontainer').pagecontainer('change','#imagePopup');
                $('#imagePopup').trigger('create');
            });
        });

Answer 1

如果您的父div已经定义明确，那么您只需要'body'

这一行

$('body').on('click','.someSelector',function(){

JSFiddle

就像

一样

<div id="IamID">
<div class="someSelector">ff</div><br/>
<div class="someSelector">gg</div>
</div>

第一个警告'hello world'，第二个警告'IamID'

Answer 2

好吧，我解决了这个问题，虽然我不确定这是否是解决方案。我认为问题是我正在使用id属性复制html元素及其内容并将其放在同一个内的另一个页面中文献。当我第二次点击时，不知何故因为同一文档中其他地方放置的相同属性可能会导致问题。所以我删除了我想放置的元素的id属性，只使用了类选择器。改变了这个：

$(function(){
        $(document).on('click','.quick-post-image',function(e){
            var that = $(this);
            var elem = that.parents('.post').find('.swipe').attr('id');
            $('#swipeContainer').html($('#'+elem));
            $(':mobile-pagecontainer').pagecontainer('change','#imagePopup');
            $('#imagePopup').trigger('create');
        });
    });

为：

$('.quick-post-image').bind('click',function(e){
            var that = $(this);
            var elem = that.parents('.post').find('.imageGroup')[0];//this is the parent of the element i want to grab
            $('#swipeContainer').html($(elem).clone(true,true).html()); //place the element's deep copy in another page
            $(':mobile-pagecontainer').pagecontainer('change','#imagePopup'); //change page
            $('#imagePopup').trigger('create');
        });

jquery - 无法在同一元素上第二次触发click事件

2 个答案: