jQuery-无法再次触发同一元素上的click事件

Question

I have a jquery mobile page with click event attached to a series of elements with a class selector. When i click the first element ,everything is fine but if i change page and come back , the click event fires but fails to traverse the DOM. Here is the simplified version.

<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>

So, the problem is, i am unable to traverse the DOM using click event ,by clicking on the same element for the second time, after returning from another page . If i do not navigate to another page , this problem doesn't occur. Here is the relevant part of the page which is inserted into the 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 %}

Th script:

$(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

If you have your parent div well-defined, then all you need is 'body'

This line

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

JSFiddle

Like in the case of

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

The 1st alert 'hello world', 2nd alert 'IamID'

Answer 2

ok, i solved the problem, although i am not sure if this is the solution.The problem i think is that i am copying a html element and its contents with an id attribute and placing it in another page within in the same document. when i click second time, somehow because of the same attribute placed elsewhere in the same document might be causing the problem. So i removed the id attribute of the element i want to place and using only the class selector. changed this:

$(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');
        });
    });

to:

$('.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');
        });