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');
});
});
If you have your parent div well-defined, then all you need is 'body'
This line
$('body').on('click','.someSelector',function(){
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'
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');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.