How to update the .map(maped) array on second button click. What i need to Archive is on second button click update the array.
I need to watch for changes then call the .map() again.
$("#send, #more_column").click(function(e) {
if (this.id == 'more_column') {
console.log("Second button click"); //im inside second button click
// here i need to update the device_id[] array add one more item to array or more
}
device_id = $('input:enabled[name="device_id[]"]').map(function() {
return $(this).val(); // $(this).val()
}).get();
});
How can i update the device_id array when second button is clicked.
If the second button is clicked more then once again update the device_id array.
Any ideas ?
Mixing event handlers doesn't make sense in this scenario. It's much better to keep the code simple, so have an event handler for the add button and an event handler for the send button, and make the add button also call the send handler...
function send() {
device_id = $('input:enabled[name="device_id[]"]').map(function() {
return $(this).val(); // $(this).val()
}).get();
}
function add() {
// add whatever you need to add here
// execute the "send" handler...
send();
}
$("#send").on("click", send);
$("#more_column").on("click", add);
Related
I have button (".moreAlertsBtn") that run function when user click on it
I would like to run the same function if user click on another button that contain the id "#alertsBtn"
how do I add OR condition?
$(document).on('click','.moreAlertsBtn',function() { }
also - inside the function, can i add contision if user click on the first button and another if he click on the second?
Just separate them using comma(,) like this:
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() { });
can i add condition if user click on the first button and another if
he click on the second?
$(document)
.on('click','.moreAlertsBtn, #alertsBtn',function() {
if($(this).hasClass('moreAlertsBtn')) {
//.moreAlertsBtn clicked
} else {
//#alertsBtn clicked
}
});
how do I add OR condition?
You can use the comma, which in CSS is "or" (but keep reading):
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() { });
But:
also - inside the function, can i add contision if user click on the first button and another if he click on the second?
If you're going to do that, then it makes more sense to use separate handlers:
$(document).on('click','.moreAlertsBtn',function() { });
$(document).on('click','#alertsBtn',function() { });
But answering the question, yes, you can tell like this:
if (this.id === "alertsBtn") {
// It's #alertsBtn
} else {
// Must be .moreAlertsBtn
}
E.g.:
$(document).on('click','.moreAlertsBtn, #alertsBtn',function() {
if (this.id === "alertsBtn") {
// It's #alertsBtn
} else {
// Must be .moreAlertsBtn
}
});
That works because jQuery will call your handler with this referring to the DOM element you "hooked" the event on (even when you're actually doing delegation, as you are in your examples).
You can use comma in-between selectors as follows :
$(document).on('click','.moreAlertsBtn,#alertsBtn',function() { }
In my html page I'm having one div element as subbutton. In javascript I'm appending button to this div element.
$.each(responseObj.me, function (i, me) {
$('#subbutton').append('<input type="button" value=subscribe id="subscribe" background-color="green" onclick="">'+'</input>');
var subscribe=check();
function check()
{
if(responseObj.me[i].isSubscribed==="false")
{
document.getElementById("subscribe").value="I Trust";
$('#subbutton').click(function() {
sub(text);
document.getElementById("subscribe").value="Trusted";
});
}
else
{
document.getElementById("subscribe").value="Trusted";
$('#subbutton').click(function() {
unsub(text);
document.getElementById("subscribe").value="I Trust";
});
}
}
But the problem is when I click on the button first time, it's able to subscribe if it's not subscribed and able to unsubscribe if it's already subscribed. But if again I want to subscribe who is unsubscribed then it's not unsubscribed.sub(text) is a function used to subscribe person and unsub(text) is a function to unsubscribe person.
you can use,
$(document).on("click",".subscribe",function(){
//your code here
});
i created a jsfiddle. just check it out whether that is your aim
http://jsfiddle.net/2dAf9/
is you are calling check method more than one time??
then instead of using $('#subbutton').click() you have to use $('#subbutton').unbind("click").bind("click",function(){});
because it will not clear the click event it first initialized. it will call both funcitons.
try this way
So I'm dynamicly creating a list of songs like this.
function createSongsList(number){
clearDiv("songList");
songListDiv = document.getElementById('songList')
var active = ' active';
var pause = ' pause';
for (var i = 0; i <tracksList.length ; i++) {
var text ="";
if(i==number){
$(songListDiv).append('<h4 class="list-group-item-heading"><span class="glyphicon glyphicon-pause"></span>'+' '+tracksList[i].title+' '+'</h4><p class="list-group-item-text">'+text+'</p>');
}
else{
$(songListDiv).append('<h4 class="list-group-item-heading"><span class="glyphicon glyphicon-play"></span>'+' '+tracksList[i].title+' '+'</h4><p class="list-group-item-text">'+text+'</p>');
}
};
$(songListDiv).on("click", 'a', function (e) {
console.log("ID of selected song: "+$(this).attr('id'));
});
}
function clearDiv(divId){
document.getElementById(divId).innerHTML="";
}
When I want to change the list according to which song is currently playing, I just call the method again where I clear the div where the dynamic list is created and creat the list again.
The problem is that some how the onclick event fires the same amount of times as the list is created. So when the list is created the first time, the onclick fires once. The next time I call the method, the onclick fires twice, etc. Why is that?
Should I create a new function where I only update the elements in the list I want to change and do something with the onclick eventhandler there? I'm stumped...
You are binding an event each time you click. While that is uneffective, i am proposing 2 options :
First option
Get the binding out of your function and write it like that :
$('#songList').on("click", 'a', function (e) {
console.log("ID of selected song: "+$(this).attr('id'));
});
This should be placed when #songList is currently in the DOM. Maybe it is there when the DOM is ready or you are appending it yourself.
Second option
Turn off the event before adding another .on() :
$(songListDiv).off('click', 'a').on("click", 'a', function (e) {
console.log("ID of selected song: "+$(this).attr('id'));
});
Is there a way to run two functions similar to this:
$('.myClass').click(
function() {
// First click
},
function() {
// Second click
}
);
I want to use a basic toggle event, but .toggle() has been deprecated.
Try this:
$('.myClass').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
} else {
// even clicks
}
$(this).data("clicks", !clicks);
});
This is based on an already answered question: Alternative to jQuery's .toggle() method that supports eventData?
Or this :
var clicks = 0;
$('.myClass').click(function() {
if (clicks == 0){
// first click
} else{
// second click
}
++clicks;
});
this I worked for my menu
var SubMenuH = $('.subBoxHederMenu').height();
var clicks = 0;
$('.btn-menu').click(function(){
if(clicks == 0){
$('.headerMenu').animate({height:SubMenuH});
clicks++;
console.log("abierto");
}else{
$('.headerMenu').animate({height:"55px"});
clicks--;
console.log("cerrado");
}
console.log(clicks);
});
i don't know what you are tryin to do but we can get basic toggle by
$('.myClass').click({
var $this=$(this);
if($this.is(':hidden'))
{
$this.show('slow');
}else{
$this.hide('slow');
}
})
note: this works for endless click event for that element .. not just for two clicks (if that is what you want)
OR you can use css class to hide/show the div and use jquery.toggleClass()
In the method mentioned below We are passing an array of functions to our custom .toggleClick() function. And We are using data-* attribute of HTML5 to store index of the function that will be executed in next iteration of click event handling process. This value, stored in data-index property, is updated in each iteration so that we can track the index of function to be executed in next iteration.
All of these functions will be executed one by one in each iteration of click event. For example in first iteration function at index[0] will be executed, in 2nd iteration function stored at index[1] will be executed and so on.
You can pass only 2 functions to this array in your case. But this method is not limited to only 2 functions. You can pass 3, 4, 5 or more functions in this array and they will be executed without making any changes in code.
Example in the snippet below is handling four functions. You can pass functions according to your own needs.
$.fn.toggleClick = function(funcArray) {
return this.click(function() {
var elem = $(this);
var index = elem.data('index') || 0;
funcArray[index]();
elem.data('index', (index + 1) % funcArray.length);
});
};
$('.btn').toggleClick([
function() {
alert('From Function 1');
}, function() {
alert('From Function 2');
}, function() {
alert('From Function 3');
}, function() {
alert('From Function 4');
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="button" class="btn">Click Me</button>
<button type="button" class="btn">Click Me</button>
If you literally only want the first and second click:
$('.myClass').one( 'click', function() {
// First click
$('.myClass').one( 'click', function() {
// Second click
});
);
var click_s=0;
$('#show_pass').click(function(){
if(click_s % 2 == 0){
$('#pwd').attr('type','text');
$(this).html('Hide');
}
else{
$('#pwd').attr('type','password');
$(this).html('Show');
}
click_s++;
});
When You click the selector it automatically triggers second and waiting for another click event.
$(selector).click(function(e){
e.preventDefault(); // prevent from Posting or page loading
//do your stuff for first click;
$(this).click(function(e){
e.preventDefault();// prevent from Posting or page loading
// do your stuff for second click;
});
});
I hope this was helpful to you..
I reach here looking for some answers, and thanks to you guys I´ve solved this in great manner I would like to share mi solution.
I only use addClass, removeClass and hasClass JQuery commands.
This is how I´ve done it and it works great:
$('.toggle').click(function() {
if($('.categ').hasClass("open")){
$('.categ').removeClass('open');
}
else{
$('.categ').addClass('open');
}
});
This way a class .open is added to the Html when you first clikc.
Second click checks if the class exists. If exists it removes it.
I have this function:
$("#border-radius").click(function(){
var value = $("#border-radius").attr("value");
$("div.editable").click(function (e) {
e.stopPropagation();
showUser(value, '2', this.id)
$(this).css({
"-webkit-border-radius": value
});
});
});
It reads the value of a textbox,
input type="text" id="border-radius" value="20px"
...and does a few things with it that are not relevant to my problem.
The textbox has the id="border-radius", and when it is clicked (and has a value) the function executes, as shown: $("#border-radius").click(function(){ ...do some stuff...
Basically, I want to be able to type a value into the textbox, and then click an object (submit button or div, preferably a div) and have it execute the function after: $("#border-radius").click(function(){ ...do some stuff... Instead of having to click the textbox itself
What can I add/change to enable this?
I think you need to identify the event target.
that you can do it by
event target property
example
$(document).ready(function() {
$("#border-radius").click(function(event) {
alert(event.target.id);
//match target id and than proceed futher
});
});
Put the click handler on #my-button or whatever your button is.
$("#my-button").click(function(){
var value = ... /* your original code */
});
It will still work because you are getting the value like $("#border-radius").attr("value"); and not $(this).attr("value");. So you all you need to change is which element you attach the click function to.
Alternatively, if you want to keep both handlers, you can just use it for both elements like this:
var commonHandler = function(){
var value = ... /* your original code */
};
$("#border-radius").click(commonHandler);
$("#my-button").click(commonHandler);
You can also trigger the click event of #border-radius, but this will execute all the event handlers attached on it:
$("#my-button").click(function () {
$("#border-radius").click();
// or $("#border-radius").trigger('click');
});