I am working with caph framework and i trying to click in every id focused
$(event.currentTarget).on('selected',function() {
var value = $(this).prop('id');
$('#' + $(this).prop('id')).trigger('click');
});
You can access the event target with $(this) in jQuery. To automatically click on the selected element you could do
$(event.currentTarget).on('select', function() {
$(this).click()
// or $(this).trigger('click')
};
If I understand your question right though you're asking how to click every element with a given ID - please note that you should be using classes for this, as IDs are supposed to be unique. You could achieve that with the following:
$(event.currentTarget).on('select', function() {
$('.yourClassName').click()
};
This will click on every element with the given class.
Related
I'm trying to update a modal & video attributes on button click.
It works well but the problem is that it only apply this when i click on the first button ( first element with the class videoBtn ), i want it to be applied on all other buttons with the same class
here is my code
$(".videoBtn").click(function(){
$("#video").attr('src',$(".videoBtn").data('src'));
$(".modal").attr('id', $(".videoBtn").data('target').substring(1));
});
You are not using value of currently clicked element, but first with class, you should use $this instead of $('.videoBtn')
$(".videoBtn").click(function(){
$("#video").attr('src',$(this).data('src'));
$(".modal").attr('id', $(this).data('target').substring(1));
});
$(".videoBtn").each(function(){
$(this).on('click', function() {
$("#video").attr('src',$(".videoBtn").data('src'));
$(".modal").attr('id', $(".videoBtn").data('target').substring(1));
})
})
I have a HTML table created with javascript where i have possibility to add new rows (dynamically added elements). In one of the tds i have an input field that fires a bootstrap modal to open. In the modal I have radiobuttons with options and when OK button is clicked the value from the radiobutton is set in the inputfield. The problem is that the value gets updated on every row, not just the row i clicked.
Since the elements are added dynamically i used
$(document).on('click', 'input', function (e) {
doSomething();
});
Any idea how to solve this problem?
Updated with more code
$(document).on('click', 'input', function (e) {
var inputForm = e.target;
modal.modal({show:true});
modal.find(".btn-success").click(function () {
var choice = $("modal").find('input[type=radio]:checked').val();
if (choice) {
modal.modal('hide');
inputForm.value = choice;
}
});
});
Without any furter information about the code you are running it's hard to help you.
But, you might be able to use the target property of the event (e), to look at what element actually triggered the click, to be able to see which row/textbox to update when the modal is closed.
Is there a way to check if any of the elements of a class have been clicked with jQuery? I want to detect if an element with a certain class has been clicked.
I want to detect if an element with a certain class has been clicked.
Well you could always subscribe to the .click() event handler which will be invoked when a DOM element is being clicked upon:
$('.someClass').click(function() {
// here you could use "this" to get the DOM element that was clicked.
});
you could then associate some metadata information with this DOM element if you want to track it using the .data() function:
$('.someClass').click(function() {
var isClicked = $(this).data('clicked');
if (!isClicked) {
// it's the first time we are clicking on this element
$(this).data('clicked', true);
} else {
// the user has already clicked on this element
}
});
I am currently working on a website and got stuck with the following problem:
On the website I have small dots (images) with the ids "dot0001", "dot0002", "dot0003", etc. . I also have hidden images (visibility:hidden) with the ids "info0001", "info00002", "info0003", etc.
I am looking for a jQuery solution. What I need is a code that allows the following events:
When users move the mouse over "dot0001" the image "info0001" becomes visible and when they leave "dot0001", "info0001" becomes invisible again. Same applies to "dot0002"-"info0002" , "dot0003"-"info0003" etc. So only the info-images with the corresponding 4 digit number become visible.
I gave it endless tries but got nowhere and there is not even a point in pasting my code.
Any help appreciated!
Something like this should work (though untested):
$('[id^="dot"]').on({
mouseenter: function(e) {
var infoId = this.id.replace('dot', 'info');
$('#' + infoId).show();
},
mouseleave: function(e) {
var infoId = this.id.replace('dot', 'info');
$('#' + infoId).hide();
}
});
That uses an attribute-starts-with selector to select all elements with an id beginning with "dot", then binds the event handlers to them. The event handler functions themselves simply replace the "dot" part of the id with "info" to form the correct new one, then show or hide the element as appropriate.
Don't forget to wrap that code in a DOM ready event handler so that it executes once the elements actually exist, otherwise it won't work.
Get all elements which id starts with "dot" and show/hide related "info" on mouseover/out:
$("[id^=dot]").hover(
function(){
$("#info" + this.id.substring(3)).css({"visibility":"visible"});
},
function(){
$("#info" + this.id.substring(3)).css({"visibility":"hidden"});
}
);
http://jsfiddle.net/EGBnR/
How can I get the id of the element that triggered the jQuery .change() function?
The function itself works properly, but I need a specific action for a selector with id="next".
$("select").change(function() {
[...snip....]
alert( $(this).attr('id') ); // <---- not working
}
Any ideas why the alert above isn't working?
this is the DOM element on which the event was hooked. this.id is its ID. No need to wrap it in a jQuery instance to get it, the id property reflects the attribute reliably on all browsers.
$("select").change(function() {
alert("Changed: " + this.id);
}
Live example
You're not doing this in your code sample, but if you were watching a container with several form elements, that would give you the ID of the container. If you want the ID of the element that triggered the event, you could get that from the event object's target property:
$("#container").change(function(event) {
alert("Field " + event.target.id + " changed");
});
Live example
(jQuery ensures that the change event bubbles, even on IE where it doesn't natively.)
Do you mean that for a select element with an id of "next" you need to perform some specific script?
$("#next").change(function(){
//enter code here
});