I have div having class name ".modalPopup" inside the div I have multiple table and inside table I have divs and inside the multiple controls like text box(input) and dropdownlists(select).
I want is that I want to fire click event when user click on any where on main div which have "modalPopup " except the dropdownlist(select).
I try using my options but I can't get the specific click event.
Like this:
$('.modalPopup :not(modalPopup select)').click(function(){
document.write("working for click except select ");
});
Can any one please provide me the solution?
Easiest way is to just bind the click event on the div with class of modalPopup and then check what the user actually clicked on using e.target:
$('.modalPopup').click(function(e){
if (!$(e.target).is('select')) {
document.write("working for click except select ");
}
});
e.target is the dom element that was clicked. $(e.target).is('select') gets that dom element and created a jQuery object from it and checks if it is a select.
JSFiddle Example
You are missing a dot before .modalPopup in the not() condition.
$('.modalPopup :not(.modalPopup select)').click(function(){ document.write("working for click except select "); });
Related
I have multiple checkbox elements on my page, whenever someone clicks on each of them, their color and text are changed, I was able to do that with CSS, but I wanted to change the icon in the checkbox button also, So I Use javascript in my HTML code but when I run the script it only works for one element, only the first one, so that means the icon only change for the first checkbox button but it is not working for all the other button, I tried to give all my checkbox button unique ID but I still have the same issue
This is checkbox 1 and 2 when not selected
This is checkbox 1 and 2 when selected
Here's the script I run to do that:
Ps: I use this script for all the other checkbox buttons, I already tried to change the id of the buttons to match HTML and the script id but still working only for the first one.
document.getElementById ('checkbox').addEventListener ('click', function (ev) {
document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-circle-check');
}, false);
UPDATE
I've read all your answers guys but none of them seems to solve my problem.
Please, kindly get a look at the full code here: https://codepen.io/edengandhi/pen/BaJoJYY
Do NOT use the same ID on multiple elements. It will only return the first one it finds. You should be setting multiple items with the class instead. You can then do.
document.getElementByClassName('YourClassNameHere)
or
document.querySelectorAll('.YourClassNameHere') *** NOTE the .... You will need . for the determining a class. # would determine for an ID.
document.getElementById ('checkbox').addEventListener ('click', function (ev) {
document.getElementsByClassName('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-circle-check');
}, false);
getElementsByClassName('icon') will select all classes that have that value.
document.getElementById will only return the first element with the specified id, therefore giving multiple elements the same id won't help.
I suggest to check out document.getElementsByClassName providing the check boxes the same class instead.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
you can use this but it this method returns a nodelist so you'd have to use a loop to add event listener to each of the checkboxes:
//if you're using class selector
document.querySelectorAll('.checkbox');
//if you're using id selector
document.querySelectorAll('#checkbox')
I have a table with data, and when I click on a cell in a certain column, I want it to change into a select dropdown for the user to choose a category for that row (which will be written to the database by AJAX but that'll come later).
I've done something similar before with text boxes using this, which works great, but I'm not sure if I'm modifying it correctly.
I've created a JSFiddle which shows the problem I'm having. I click on the text and it turns into a select element as expected, but when I click on that to choose an option, the dropdown doesn't stay open and I can't select anything. Debugging has shown me that when I click the dropdown, it runs the $("td.ChooseType").click() routine again so I've tried to suppress that by removing the class then adding it back on on selection, but that hasn't solved it. On the rare occasion that the dropdown stays open, I am unable to select anything by either mouse or keyboard.
All of the users will be on IE8 unfortunately, so I need it to be compatible with that.
Thanks!
You need to use event delegation, as otherwise that click event is always bound to that td - regardless of whether its class changes.
Simply change:
$("td.ChooseType").click(function() {
To:
$("table").on('click', '.ChooseType', function () {
JSFiddle demo.
Purely as an alternative to the accepted answer, you can remove an attached handler with unbind. So instead of adding and removing the class, you could unbind and rebind your handler. Only requirement is that the function can't be in-line, but has to be declared separately.
example: http://jsbin.com/qiqunici/1/edit
var handler = function () {
$(this).unbind('click', handler); //unbind the clicked element only
//create and change the element
//inside the select-change event, instead of addClass, re-attach:
{
//$(this).parent().addClass("ChooseType").text(selected).find('select').remove();
$(this).parent().click(handler).text(selected).find('select').remove();
}
};
$("td.ChooseType").click(handler);
Please see the jsfiddle link http://jsfiddle.net/Bjf7c/1/ and explain why the on click function does not work after we select another item and return back to the first selected item. It looks something weird to me since all the similar items fires the click function but not for the default selected item.
In the example first click on F and then click on E. You will find that all other items are clickable except E.
$(".items.cursor:not('.selected')").on('click',function(){
$('.items.selected').removeClass('selected');
$(this).addClass('selected');
});
When you write
$(".items.cursor:not('.selected')").on('click',function(){
you bind your event handler to all items that are not selected at time of binding, not at time of click. So you don't bind to your initially selected element.
You could use on and delegation to keep your selector and have it tested each time but here is a better solution :
$(".items.cursor").on('click',function(){
if ($(this).hasClass('selected')) return;
$('.items.selected').removeClass('selected');
$(this).addClass('selected');
});
(in this specific example the test isn't really useful but it might be if you add more code and don't want it to be executed if the user clicks the already selected element)
You are binding a function on the click event only to the non selected elements.
E is selected when the page loads and you bind this function.
I don't know if this is possible or not.
I have a dynamic form with contents that are dynamically created. Every time a button is clicked, a new div element is added. And what I wanted to do is to make the previous div not editable, that is, the input fields could not be used, buttons could not be clicked.
Is it doable?
Thanks.
Try something like this:
// Disable all input-like elements in the divs except for the last div
$(".divclass:not(:last-child) :input").attr("disabled", true);
Where divclass is the class of the divs you mentioned.
Example: http://jsfiddle.net/grc4/LrxkU/2/
Maby something like this? http://jsfiddle.net/ng4Ct/2/
If you can access your previous div elements you can add attribute disabled="disabled" to them.
You can fire the code that adds the disabled attribute to required elements on the same button click function.
Well, you can either access the specific elements inside the DIV and disable them using Javascript, or you can access the DIV and then loop through all the elements inside (probably preferable), and disable them automatically with Javascript.
Of course it depends on how your code is written, can you provide some of the code that generates the DIVs?
I am trying to automate a click on the multiple select dropdown in this example:
http://davidwalsh.name/dw-content/jquery-chosen.php
I am sending the click event to the li element with the class "active-result" (after clicking on the element that says "Select Frameworks...").
The issue is that the li element doesn't have the onclick handler, so the option is not added to the list. How can I find the element that actually has the onclick handler in order to perform the action?
Found out by searching the code that the element didn't have an onclick handler, it actually was listening for a mouseup event. So I modified my test to use:
selenium.mouseup().