I want to create a "next" button which display different profiles. For that, I want to reload the div. I have successfull create the function, but when It's reload 1 time, javascript is not load after, so my button click function doesn't work.
My code :
<div class="col-md-6">
<div class="my" id="profile_rd">
<div class="ibox-content text-center" id="ok">
<h1>Profile example</h1>
<a class="btn btn-xs btn-prim-red" id="please_next"><i class="fa fa-chevron-right"></i> Next</a> <!-- Here, we can click and execute the function one time , after, click doesn't work -->
</div>
</div>
</div>
<script>
$('#please_next').click(function(){
$('#profile_rd').load(document.URL + ' #ok');
return false;
});
</script>
Try changing
$('#please_next').click(function(){
$('#profile_rd').load(document.URL + ' #ok');
return false;
});
to
$(document).on( 'click', '#please_next', function(){
$('#profile_rd').load(document.URL + ' #ok');
return false;
});
You're reloading the document so after the first click on the button, the DOM can't find the element that you're trying to attach the event to. You need to use event delegation.
Related
I have this look-a-like code in my app :
let item;
$('.parent').on('click', function () {
item = $(this).attr('item') || 0;
});
$('.parent').on('click', '.children', this, function () {
doSomething();
});
<div class="parent" item="50">
<div class="children">
</div>
</div>
<div class="parent" item="51">
<div class="children">
</div>
</div>
<div class="parent" item="52">
<div class="children">
</div>
</div>
I have a parent element with several children in it. Clicking anywhere on the parent element will give me an item information, so I will be able to load functions according to this item variable on click on children.
My problem is : I have to delegate the onClick event on children to parent element otherwise the events will trigger in this order :
Click on any child
Click on parent, which is too late because I need item variable first
I have a functionality that replaces the parent element if activated, since it was dynamically inserted into the DOM, I have to delegate the onClick event as well, like this :
$('.grandParent').on('click', '.parent', function () {
item = $(this).attr('item') || 0;
});
Now my problem is that the events are triggering in the wrong order again :
Click on any child
Click on parent
How can I manage to set click event on parent as top priority?
Edit :
I will be more specific. I have a messages list on my page, each .message element contains the message content but also some functionnalities like edit, delete, set as favorite, like, etc.
Like this :
<div class="message" data-item="1">
<a class="edit">E</a>
<a class="delete">X</a>
<a class="favorite">Fav</a>
<a class="like">Like</a>
<div class="content">
Hello world !
</div>
</div>
<div class="message" data-item="2">
<a class="edit">E</a>
<a class="delete">X</a>
<a class="favorite">Fav</a>
<a class="like">Like</a>
<div class="content">
Hello world !
</div>
</div>
Each one of those functionnalities will trigger different functions when clicked : edit(), delete(), like(), etc.
All of them will make AJAX requests which will then send the item variable to my server in order to know what item has to be impacted by this click.
To avoid repetition in my events handlers, I am trying to get the data-item attribute's value with one event bound to click on .message element, relying on the bubbling of children elements.
Get the item where you actually want it and get rid of the handler on parent:
$('.parent').on('click', '.children', function () {
item = $(this).closest('.parent').attr('item');
doSomething();
});
EDIT:
Then get the item when you click on the grandparent:
$('.grandParent').on('click', '.children', function () {
item = $(this).closest('.parent').attr('item');
});
EDIT #2:
Based on the OPs updated requirements, do it like this:
<div class="message" data-item="1">
<a class="action edit" data-type="edit">E</a>
<a class="action delete" data-type="delete">X</a>
<a class="action favorite" data-type="favorite">Fav</a>
<a class="like">Like</a>
<div class="content">
Hello world !
</div>
</div>
<div class="message" data-item="2">
<a class="action edit" data-type="edit">E</a>
<a class="action delete" data-type="delete">X</a>
<a class="action favorite" data-type="favorite">Fav</a>
<a class="like">Like</a>
<div class="content">
Hello world !
</div>
</div>
$(document).on('click','.message .action',function(e) {
const item = $(this).closest('message').attr('item');
switch($(this).data('type')) {
case 'edit': doEdit(item); break;
case 'delete': doDelete(item); break;
case 'favorite': doFavorite(item); break;
}
});
See, one event handler?
It's a very common pattern to do what you're doing. In the absence of a more robust framework (e.g. React), then using plain jQuery this is how it should be done.
Trying to select the current user when click on the coffee button inside popover.
Users are populated in the home page.
<div class="user">
...
<div class="popover hovercard" role="tooltip">
...
<div class="info">
<div class="info-inner">
<div class="interactions">
<a class="coffee-btn btn" href="#">Coffee</a>
</div>
</div>
</div>
</div>
...
</div>
I tried to select the "closest" user but apparently it's targeting all users.
Below is the JS code:
$(document).on("click", ".interactions .coffee-btn" , function(){
$(this).parents(".popover").popover('hide');
// get user dom
var cur = $(this).closest(".user");
console.log(cur); //returns an array, not what i want
cur.css("float", "left");
// create another popover
});
Should I assign users an id instead with angular and target them that way?
Try:
$(".interactions .coffee-btn").on("click", function(){
// get user dom
var cur = $(this).closest(".user");
console.log(cur); //returns an array, not what i want
cur.css("float", "left");
});
It's working for me here.
When you use $(this), on (document), you're selecting the document, not the button.
I have made a modal in angular, it pops up great but the exit button doesnt fire to close the modal. It works if the button to open is reclicked but adding a new button inside the modal does not fire the function. Btw there is no bootstrap in this.
<section class="modal" ng-show="showMenu">
<div ng-click="setActive(album)">
<p class="exit" ng-click="modalFunc()"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i></p>
<h1>{{albumMod.artist}} - {{albumMod.title}}</h1>
<ul class="tracks">
<span><img src={{albumMod.img}}></span>
<li>Album: {{albumMod.album}}</li>
<li>Price: $1.29</li>
</ul>
<form style="display: inline" action="/#cart" method="get">
<button ng-click="setActive(album); cartFunc()" id="{{album.id}}"><a>Add</a></button>
</form>
</div>
</section>
$scope.closeMenu=true;
$scope.showMenu=false;
$scope.showItems=false;
$scope.modalFunc= function(){
$scope.showMenu = !$scope.showMenu;
console.log($scope.selected);
$scope.showItems = !$scope.showItems;
$scope.closeMenu=!$scope.closeMenu;
// console.log($scope.selected.attr("id"));
};
$scope.showMenu flag which you have used to hide popup is not used correctly. When $scope.modalFunc method is called then you negate the value of $scope.showMenu and assigned. So after assignment, $scope.showMenu value will be true.
Now you have used ng-show="showMenu" so your popup will not be hide.
Correct code will be:
1. Set $scope.showMenu = true in the callback which called when popup is opened.
2. $scope.modalFunc= function(){
$scope.showMenu = !$scope.showMenu;
...
}
3. Remove $scope.showMenu=false; since it is not needed.
Maybe is my question trivial, but I could not found a answer. Maybe I have been to much hours in front of the monitor :)
I have this situation:
<div class="col-xs-3" style='margin-left: -50px;'>
<a class="btn btn-primary" href="?c=Student&a=list" id="protokol"> List Studens</a>
</div>
This represent a button and with the click event, using MVC, the controller Student is called and the function list executed. But I need to send a parameter to this function that is the value of a HTML component.
<input type='text' id='parm' value=''>
How I can do this using the same structure? I tryed this, but is not correct
<div class="col-xs-3" style='margin-left: -50px;'>
<a class="btn btn-primary" href="?c=Student&a=list&v=<script>$('param').val();</script>" id="protokol"> List Studens</a>
</div>
If you're using jQuery you can attach a click handler to that element which appends the current value of the input. Try this:
$(function() {
$('#protokol').click(function(e) {
e.preventDefault(); // prevent the browser going to the default URL
var url = $(this).attr('href') + '&v=' + $('#param').val();
window.location.assign(url);
});
});
try this instead
<div class="col-xs-3" style='margin-left: -50px;'>
<a id="targetLink" class="btn btn-primary" href="?c=Student&a=list&v=<script></script>" id="protokol"> List Studens</a>
</div>
//document ready
$(function(){
var parameter = $('param').val();
$('#targetLink').attr('href', '?c=Student&a=list&v=' + parameter);
});
Hi I have a bootstrap dropdown menu that is auto filled from a database. I am trying to get an event to happen when I click on one of the items in the menu. I have tried
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
with ".ddBtnClick" being a class assigned to each of the items in the list. but nothing happened.
Here is the code to populate the list from a database.
$.getJSON("http://jeremiah.abrahamott.com/DadsCarsObjects.txt", function(data){
$.each(data.aaData, function(i, option){
$("#dropdownfill").append($('<li/>').append($('<a/>').attr("id", option.Year).attr("href", "#").attr("tabindex", "-1").addClass("ddBntClick").text(option.Make)))
});
});
Here is the html for the dropdown.
<div class="row" style="margin-left:50px;">
<div class="span3">
<div class="btn-group">
<a class="btn dropdown-toggle" data- toggle="dropdown" href="#">Make
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="dropdownfill">
</ul>
</div>
</div>
</div>
Issue is with your className. You are registering the delegated event handler for ddBtnClick but actual class name is ddBntClick.
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
and
.addClass("ddBntClick");
Change the class name during construction or change in your event delegation.
$(function()
{
$("body").on("click", ".ddBntClick", function(event) {
console.log("Is it working? Yes!!");
});
});
Have you tried wrapping your Javascript in the document.ready event?
$(function()
{
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
});
See the jQuery .ready() documentation for more information and examples.
Also, you should register the click event on the actual button and use .click() instead of .on():
$(function()
{
$(".ddBtnClick").click(function(event) {
console.log("Is it working? Yes!!");
});
});
Also, you have a typo:
.addClass("ddBntClick")
Should be:
.addClass("ddBtnClick")