I have a favourite and un-favourite functionality in my application and I am using jQuery. This functionality works partially. The page gets loaded, and when I click the 'favourite' button(it is inside add_favourite_div element), it sends a XHR request and the post is set as favourite. Then a new div called "remove_favourite_div" replaces its place.Now when I click the remove favourite(which is part of remove_favourite_div), it sends a normal http request inside of xhr.
我在我的应用程序中有一个最喜欢和不喜欢的功能,我正在使用jQuery。此功能部分有效。页面被加载,当我点击“收藏”按钮(它在add_favourite_div元素内)时,它会发送一个XHR请求,并将帖子设置为收藏夹。然后一个名为“remove_favourite_div”的新div替换它的位置。现在当我单击remove favorite(它是remove_favourite_div的一部分)时,它会在xhr内发送一个正常的http请求。
The structure when the page gets loaded first time
第一次加载页面时的结构
<div id="favourite">
<div id="add_favourite_div">
<form method="post" id="add_favourite" action="/viewpost/add_favourite">
<div style="margin: 0pt; padding: 0pt; display: inline;">
<input type="hidden"
value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho="
name="authenticity_token">
</div>
<input type="hidden" value="3" name="Favourite[post_id]"
id="Favourite_place_id">
<input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id">
<input type="submit" value="Favourite" name="commit"><br>
</form>
</div>
</div>
DOM after clicking on the unfavourite button
单击不喜欢的按钮后的DOM
<div id="favourite">
<div id="remove_favourite_div">
<form method="post" id="remove_favourite" action="/viewpost/remove_favourite">
<div style="margin: 0pt; padding: 0pt; display: inline;">
<input type="hidden" value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho="
name="authenticity_token">
</div>
<input type="hidden" value="3" name="Favourite[post_id]" id="Favourite_place_id">
<input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id">
<input type="submit" value="UnFavourite" name="commit"><br>
</form>
</div>
</div>
In my application.js, I have two functions to trigger the xhr request
在我的application.js中,我有两个函数来触发xhr请求
$("#add_favourite").submit(function(){
alert("add favourite");
action = $(this).attr("action")
$.post(action,$(this).serialize(),null,"script");
return false;
});
$("#remove_favourite").submit(function(){
alert("remove favourite");
action = $(this).attr("action");
$.post(action,$(this).serialize(),null,"script");
return false;
});
Here, when the post is initially not a favourite, favourite button is displayed and when i clicked on the button, $("#add_favourite").submit gets called and unfavourite form is displayed correctly, but now when I click on the un-favourite button, $("#remove_favourite").submit does not get called.
在这里,当帖子最初不是最喜欢的时候,显示最喜欢的按钮,当我点击按钮时,$(“#add_favourite”)。提交被调用,并且不正确的形式被正确显示,但现在当我点击un-最喜欢的按钮,$(“#remove_favourite”)。submit不会被调用。
The whole scenario is true in both ways, I mean favourite->Unfavourite and Unfavourite->favourite
整个场景在两个方面都是正确的,我的意思是favourite-> Unfavourite和Unfavourite->最爱
Can someone please help me to solve this Thanks
有人可以帮我解决这个问题
2 个解决方案
#1
0
I don't see the mechanism that actually causes "remove_favourite_div" to take the place of "add_favourite_div". If it's done dynamically, and after you've attached event handlers, then the problem is simply that your $("#remove_favourite").submit(function(){...});
happened before there was any such form on the page.
我没有看到实际上导致“remove_favourite_div”取代“add_favourite_div”的机制。如果它是动态完成的,并且在你附加事件处理程序之后,问题就在于你的$(“#remove_favourite”)。submit(function(){...});发生在页面上有任何此类表格之前。
Attach those same event handlers after swapping out the div
s and it should work fine.
在交换div之后附加那些相同的事件处理程序,它应该工作正常。
#2
0
It was because of the DOM reloading, I came to know about it in a number of resources. I am posting a few
这是因为DOM重新加载,我在许多资源中开始了解它。我发帖了几个
- http://forum.jquery.com/topic/reload-dom-after-injecting-form-elements
- http://forum.jquery.com/topic/reload-dom-after-injecting-form-elements
- http://docs.jquery.com/Events/live
- http://docs.jquery.com/Events/live
- http://docs.jquery.com/FAQ#Why_do_my_events_stop_working_after_an_AJAX_request.3F
- http://docs.jquery.com/FAQ#Why_do_my_events_stop_working_after_an_AJAX_request.3F
- http://www.learningjquery.com/2008/05/working-with-events-part-2
- http://www.learningjquery.com/2008/05/working-with-events-part-2
- jquery doesn't see new elements
- jquery没有看到新的元素
- Rebinding events in jQuery after Ajax update (updatepanel)
- 在Ajax更新后重新绑定jQuery中的事件(updatepanel)
Hope it helps :)
希望能帮助到你 :)
#1
0
I don't see the mechanism that actually causes "remove_favourite_div" to take the place of "add_favourite_div". If it's done dynamically, and after you've attached event handlers, then the problem is simply that your $("#remove_favourite").submit(function(){...});
happened before there was any such form on the page.
我没有看到实际上导致“remove_favourite_div”取代“add_favourite_div”的机制。如果它是动态完成的,并且在你附加事件处理程序之后,问题就在于你的$(“#remove_favourite”)。submit(function(){...});发生在页面上有任何此类表格之前。
Attach those same event handlers after swapping out the div
s and it should work fine.
在交换div之后附加那些相同的事件处理程序,它应该工作正常。
#2
0
It was because of the DOM reloading, I came to know about it in a number of resources. I am posting a few
这是因为DOM重新加载,我在许多资源中开始了解它。我发帖了几个
- http://forum.jquery.com/topic/reload-dom-after-injecting-form-elements
- http://forum.jquery.com/topic/reload-dom-after-injecting-form-elements
- http://docs.jquery.com/Events/live
- http://docs.jquery.com/Events/live
- http://docs.jquery.com/FAQ#Why_do_my_events_stop_working_after_an_AJAX_request.3F
- http://docs.jquery.com/FAQ#Why_do_my_events_stop_working_after_an_AJAX_request.3F
- http://www.learningjquery.com/2008/05/working-with-events-part-2
- http://www.learningjquery.com/2008/05/working-with-events-part-2
- jquery doesn't see new elements
- jquery没有看到新的元素
- Rebinding events in jQuery after Ajax update (updatepanel)
- 在Ajax更新后重新绑定jQuery中的事件(updatepanel)
Hope it helps :)
希望能帮助到你 :)