I'm trying to detach click event from several p elements via plain JavaScript. I'm able to access these p elements, but for some reason I'm not able to remove the click listener. It works fine with jQuery, but not with pure JS. getP_element function is called upon page load.
Here's my code:
function getP_element(){
console.log("page loaded");
var p_array = document.getElementById("checkboxesContainer").getElementsByTagName("p");
for(var i=0;i<p_array.length;i++){
p_array[i].onmousedown = new function(){
return false; //this doesnt work
}
}
$("#checkboxesContainer p").click(false); //this works
}
EDIT:
More info about what's happening here. I created several custom checkboxes with custom style. Fore some reason the checkboxes get selected even when the user clicks on the p tags, so I figured I need to detach the click events. This is how they are defined inside my HTML:
<div id="checkBoxDiv2" class="checkBoxDiv">
<input type='checkbox' value='someValue' id="checkBox2"/>
<label for="checkBox2"><p class="checkBoxText">some text goes here</p>
<span></span>
</label>
</div>
You don't need to disable the click event.
The checkboxes are getting selected when you click on the p because you have the p tag inside a label which has for="checkBox2"
That's what it's meant to be doing.
Remove the for and it will prevent clicking the label from activating the correspinding input element
Try
p_array[i].onmousedown = null;
See How to Clear/Remove JavaScript Event Handler?
Edit
The reason that the checkboxes are checked when clicking on p tags has nothing to do with click handlers.
Rather the reason is the for attribute in the parent label tag. This will check the checkboxes when a click occurs on the label.
Change your HTML to
<label><p class="checkBoxText">some text goes here</p>
<span></span>
</label>
Related
I have a form which I want to use Google tag manager to get the label text as an event label when someone clicks on the checkbox. I was able to get it to work when a user clicks on the actual label, but doesn't work when the user click on the checkbox rather than the label.
What I am trying to do is to get the text located by the side of the check box. from the example HTML code of the checkbox (pasted below), you can see both the checkbox and text are inside the tag and I need to get the text located next to the checkbox.
code
<div class="stockist-search-filter-checkboxes">
<div class="stockist-search-filter-checkbox">
<label>
<input name="filters" type="checkbox" value="11222">Home Specialist
</label>
</div>
</div>
code
Well, you can change a selector to catch the checkbox click rather than the label click. Or you can add an event listener to the checkbox on page load and send a dataLayer event from it for GTM to fire your event.
If this is not enough for you to resolve it, show your html around the checkbox (NOT as a screenshot) and show how you configured the trigger (as a screenshot).
Here's a code sample for adding a listener that pushes the DL event on checkbox changes.
var checkbox = document.querySelector("input[name=checkbox]");
checkbox.addEventListener('change', function() {
dataLayer = dataLayer || [];
dataLayer.push({
event:"checkbox_changed",
checkboxIsChecked: checkbox.checked,
checkboxName: checkbox.getAttribute("name")
})
});
I am creating a suggestion box below a search box. I want it so that when the user has focus in the search box, and then clicks on one of the suggestions, it triggers an action. I have tried using jquery's on:
$(".searchbox + div").on("click", "a", function() {
$(".searchbox").val($(this).html());
});
My HTML structure is like this:
<input type="search" placeholder="Search" class="searchbox">
<div></div>
The links are dynamically inserted inside the div that follows the input.
The links do not have an href value, so they are not really links, I just want them to act like links.
When I click on one of the links, the searchbox loses focus, and, because of the css I have, the links get visibility:hidden. I think the searchbox loses focus before the link action is triggered, so it never is triggered. How could I get around this?
You can see it here.
Clarification: What I think is happening:
User clicks on link
Computer thinks, The user just clicked outside of the search box
Search box becomes blurred
CSS sees that search box is blurred, styles say to now make the suggestions visibility:hidden
Now the links are no longer clickable, so the event is never triggered.
Somewhere in your code you have a click handler that brings the search bar to the top and the rest of the UI into view. It executes when the user clicks anywhere that's not the search bar. You should add a statement that checks if the clicked element was an <a> element in the suggestion box.
So if this is the click handler. Also i think it's time to add an id to your suggestion div.
$(document).click(function(e){
var $clicked = $(e.target);
if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0)
$(".searchbox").val($(this).html());
else if(click was outside searchbar)
//move searchbar up and show UI
else
//click happened inside searchbar, do nothing.
})
I'm not sure why nobody understands your question, or why this question is being downvoted. It's a perfectly valid question.
EDIT:
I suggest wrapping the input and suggestion div with another div. Give this wrapper an attribute of tabindex="-1" so it can receive blur/focus events.
<div id="wrapper">
<input type="search" placeholder="Search" class="searchbox">
<div></div>
</div>
Then change your $(".searchbox").on("blur") to $("#wrapper").on("blur")
This way you can click anywhere in the suggestion box without the blur firing.
Alternatively, the mousedown event fires before the blur event. So try this maybe
$(".searchbox + div").on("mousedown", "a", function() {
$(".searchbox").val($(this).html());
});
You can use some plugins for that. Its too easy. For example if you work with any front framework like bootstrap, you can use typeahead.js plugin
What I want to do is the following:
I have an <input> element and onclick of that input, I toggle a certain <div> (please see below)
<div>
<table>
<tr>...</tr>
...
...
</table>
</div>
When I click a row on the table above, I want to trigger an event (ex. put a certain value to <input> above and then hide the whole <div>. I have made it to work this far.
Issue: When the div is shown but NO <tr> was clicked (ex. the background is clicked), I want to hide the <div> this time also. So I put onblur event for the <input> and hides the div when this happens. This works.
Problem: BUT now, when I properly select a <tr>, the onblur is triggered FIRST, so the div and table gets hidden and no tr onclick is triggered. :(
My Solution so far: I removed the onblur event and made something like
$(document).mousedown(function() {
If event.target == myDiv
dont hide div, so onclick is triggered (manully hide later anyway)
else //background is clicked
hide div yey
});
Question: Is this a decent workaround? Or is there a better way? I want to know how jQuery UI implements this since I saw that datepicker is also a div. Sorry but my level of jQuery still does not allow me to properly read their implementation :/ If someone is kind enough to explain to me. Thank you.
Do something like
someTimeout = setTimeout(function(){ someFunction(); }, someDuration)
$("#someID").click(function() {
clearTimeout(someTimeout );
});
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 "); });
Situation:
I have a check box and a div container inside another div container. When the check box or the label for the check box is clicked, the inner div's display style should change. If the display is set to block, then it should change to none and vice versa.
Code:
HTML:
<input id="oper_sale" type="checkbox" name="oper_sale" onchange="show_hide_operation(this, 'sale_block');">
<label for="oper_sale" class="public">Venta:</label>
<div id="sale_block" name="sale_block" style="display: none;">
AAAAAAA
</div>
Javascript:
// Show or hide parts of a form
function show_hide_operation (oper_choice, oper_block_id) {
var oper_block = document.getElementById(oper_block_id);
if (oper_choice.checked == true)
oper_block.style.display = "block";
else
oper_block.style.display = "none";
}
Problem:
This works fine in Firefox, but in IE it does not. When I click on the check box or its label, nothing happens. But, if I click anywhere else on the screen after clicking on the check box or its label, the change happens without a problem. I tried blurring the check box after it is click but it did not help.
In short:
IE does not render the change in display style until the user has click on a different part of the screen than what called the java script to change the style
Any help is greatly welcomed
IE doesn't fire .onchange for checkboxes until it loses focus, you may want to use the .onclick event here.
Use the onclick event, the change event in IE executes after the element loses focus.
Check this example.
In IE the onchange event obviously happens when the focus leaves the control, just as with an input with type="text".
Use the onclick event instead.