This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I'm creating new input field with JQuery that include a remove button. The remove button works on the original element but does not work on those that were created using JQuery.
document after two new email fields added
<fieldset>
<legend>Send Email</legend>
<label>Emails(s) to send notice to.</label>
<p>
<input type="email" name="emails[]" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;"><span class="btn_orange">x</span>
</p>
<p><input type="email" name="emails[]"><span class="btn_orange">x</span></p><p><input type="email" name="emails[]"><span class="btn_orange">x</span></p><p>
<span class="btn_orange"><a class="add_email_button" href="#">Add Another Email</a></span>
</p>
<p>
<span class="btn_orange"><a class="ui-button">Send Email</a></span>
</p>
</fieldset>
Script
<script type="text/javascript">
$(document).ready(
function () {
$("#importbutton").click(function () {
$("#ProgressBarImg").show();
$.get('#Url.Action("Import", "Import")', {},
function (data) {
$('body').html(data);
$('#ProgressBarImg').hide();
});
$("#importbutton").removeAttr("href");
}
);
var dialog = $("#emailSection").dialog({
autoOpen: false,
height: 400,
width: 475,
modal: true
});
$('#emailButton').click(function () {
$(dialog).dialog("open");
$('#emailButton').removeAttr('href');
});
$('.add_email_button').closest('p').click(function () {
var html = '<p><input type="email" name="emails[]" /><span class="btn_orange">x</span></p>';
$(html).insertBefore($(this));
});
$('a.remove_field').closest('p').click(function () {
$(this).remove();
});
}
);
</script>
You're setting an event on the element that is on the page initially. After you add new elements, the new elements don't have the handler, you could add it ass you add them, but that's the best way.
Use event delegation: http://jsfiddle.net/mendesjuan/4my1dhw1/
$(document).on('click', 'a.remove_field', function () {
$(this).closest('p').remove();
});
That means you are listening for clicks on the whole document, but filtering for only the ones you're interested in.
The second benefit is that you don't need a separate handler for each element, saving you memory
The code I posted differs in behavior from what you had in that it requires that you click the x. Your code would delete when you click anywhere in the <p>. The reason I changed it is because there is no CSS selector that mimics what closest('p')does, that is CSS selectors do not go up the tree. However, what I have seems to make more sense, and you probably were using closest('p') only because you wanted to delete the entire <p>, but you can do that from inside the handler.
For elements that were added after page load you should use:
$('body').on('click', '.classSelector', function(e) {
});
Related
I'm trying to get each blue div (<div id="rectangle"></div>) to fire independently.
Right now, if you hover/click over the first one, both fire simultaneously, and if you hover/click over the second one, neither fires.
This is a common question and has been addressed elsewhere, but I've tried to implement several different versions and apply it to this particular code, and it's not working. I was hoping someone could provide some explanation to help me learn, and I can compare to the other posts I've tried out to understand what the difference is.
$('.rectangle1').hide();
$('#rectangle').on('click', function() {
clicked = !clicked;
});
$('#rectangle').hover(function() {
$('.rectangle1').slideDown()
},function() {
if (!clicked) {
$('.rectangle1').slideUp()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rectangle"></div>
<div class="rectangle1"></div>
<div id="rectangle"></div>
<div class="rectangle1"></div>
http://jsfiddle.net/Q5cRU/99/
One problem is that you're using id="rectangle" for two elements. According to MDN:
The id global attribute defines a unique identifier (ID) which must be unique in the whole document.
jQuery is only adding the event listeners to the first element with that ID.
The answer is simple: The event listener was only applied to the first #rectangle. jQuery does not select more than one #ID'd element. With that being said it is not semantic to use the same id on more than one element.
Here's what you are looking for: http://jsfiddle.net/Q5cRU/116/
$(document).ready(function() {
$('.rectangle1').hide();
$('.rectangle').data( 'clicked', false).click(function() {
$(this).data( 'clicked', !$(this).data('clicked'));
}).hover(
function() {
$(this).next('.rectangle1').slideDown();
},
function() {
if (!$(this).data('clicked')) {
$(this).next('.rectangle1').slideUp();
}
}
);
});
$("div.rectangle1").mouseover(function() {
$(this).stop(true, true).show();
});
Well in HTML, the id attribute must be unique per element. See this. The class attribute can be shared by multiple elements to have the same style effect or same purpose. So the first and second div can't have the same id - "rectangle". To fire event independently you can assign different id for them.
HTML:
<div>
<div class="rectangle"></div>
<div class="rectangle-hover"></div>
</div>
<div>
<div class="rectangle"></div>
<div class="rectangle-hover"></div>
</div>
CSS:
.rectangle {
width: 140px;
height: 80px;
background: #037CA9;
margin-bottom:10px;
}
.rectangle-hover {
width: 140px;
height: 150px;
background: red;
}
Javascript:
$(function(){
var clicked = false;
$('.rectangle-hover').hide();
$('.rectangle').hover(
function(){
$(this).parent().find('.rectangle-hover').slideDown();
},
function(){
if (!clicked) {
$('.rectangle-hover').slideUp()
}
}
);
});
How can I auto trigger file input? ie. in the link below I want to trigger upload button on load
DEMO
<form id="test_form">
<input type="file" id="test">
<div id="test1">
<button>Upload</button>
</div>
</form>
$("#test1").trigger('click');
$("#test").trigger('click');
File input can't be automatically triggered in onload due to security purpose. It can't be fired without any user interaction. It is very disgusting when a page activates anything itself when the page loads.
By the way.
You can use label instead of button like following:
<label for="test">Upload</label>
$("document").ready(function() {
setTimeout(function() {
$("#test1").trigger('click');
},10);
$('#test1').click(function(){
alert('hii');
})
});
click event triggerd.
http://jsfiddle.net/j9oL4nyn/1/
You can do it somthing like as :
<button id="upld_btn">Upload</button>
$(document).ready(function () {
$('#upld_btn').trigger('click');
});
you can write something like this
$(document).ready(function(){
$("input#test").click();
});
this should work fine
The problem with your code is that you are applying a click event to the input and also to the div enclosing the button, but not to the actual button.
if you change your fiddle to this
<form id="test_form">
<input type="file" id="test">
<div id="test1"><button onclick="alert('click');">Upload</button></div>
</form>
and
$("#test1 button").trigger('click');
then the click trigger will be applied to the button. Alternatively give your button an ID and fo
$("#buttonid").trigger('click');
<form id="test_form">
<input type="file" id="test">
<div id="test1"><button>Upload</button></div>
</form>
Change your JS code like below.
$("#test1 button").click(function() {
$("#test").trigger('click');
});
Working Demo
It is not possible to programically open "Open File" dialog utilizing javascript without user action ; see Trigger click on input=file on asynchronous ajax done() .
Could, alternatively, create an element to overlay html at document .ready() event to provide user with options to click to open "Open File" dialog by calling click on input type="file" element , or close overlay of html by clicking "Close" .
$(function() {
function openFileDialog() {
button.fadeTo(0,1).find(input)[0].click();
dialog.hide();
}
function closeDialog() {
dialog.hide();
button.fadeTo(0,1);
}
var input = $("input[type=file]")
, button = $("#button").on("click", function(e) {
e.stopPropagation();
this.firstElementChild.click()
})
, options = $("<button>", {
css: {
position: "relative",
top: "36vh",
left: "12vw",
fontSize: "3.6em"
}
})
, dialog = $("<div>", {
id: "dialog",
css: {
position: "absolute",
zIndex: 2,
opacity: 0.25,
background: "dodgerblue",
width: window.innerWidth - 30,
height: window.innerHeight
}
})
.append(
options
.clone(false)
.on("click", openFileDialog)
.html("Open File")
, options
.clone(false)
.on("click", closeDialog)
.html("Close")
)
.prependTo("body");
});
input {
width: 0;
opacity: 0;
}
#button {
position: relative;
font-size: 32px;
width: 150px;
left: 32vw;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form id="test_form">
<div id="test1">
<button id="button">Upload
<input type="file" id="test">
</button>
</div>
</form>
Show input file dialog on load?
As described here only Internet Explorer allows for programmatic opening of the File Upload dialog. So the short answer is no, there is no way to automatically open the File Upload dialog on page load.
The long answer that you might consider is that you can show it when the user clicks on anything. The fact that you prefer an AngularJS solution tells us that you are writing a Single Page Application. Also, I don't think you need to show the File Upload dialog when the app first loads. You most likely need it to show after some user interaction - after the user clicks on something. That something, using the an AngularJS directive from here, could look like anything but be a file input. On click (the same user interaction) you can also switch to another route in your AngularJS app, effectively simulating a user navigating to another page and automatically presenting him the File Upload dialog.
This question already has answers here:
How to stop events bubbling in jQuery? [duplicate]
(5 answers)
Closed 7 years ago.
I am trying to call a jQuery function when clicked only on parent element.
<div id="clcbox" class="click-img">
<img id="fire" onclick="createFirework()" src="img/clicker.png" />
</div>
I have an img tag inside a div. When I click on the div it should call one function and when I click on the img I want to call another function. How can I do this?
$('.click-img, .wishes').click(function () {
$('.flipWrapper').find('.card').toggleClass('flipped');
return false;
});
When I click the div I should call the above function. However now when I click on the image, it is also calling this function and createFirework().
The issue is due to event bubbling. If you attach your events in an unobtrusive manner you can easily stop this behaviour.
<div id="clcbox" class="click-img">
<img id="fire" src="img/clicker.png" />
</div>
$('#fire').click(function(e) {
e.stopPropagation();
createFirework();
});
$('.click-img, .wishes').click(function (e) {
$('.flipWrapper').find('.card').toggleClass('flipped');
e.preventDefault();
});
First off, don't mix inline (onclick) event handlers and jQuery event handlers. Once, you've got a jQuery event handler in place of your createFirework method, you simply stopPropagation to stop it calling the handler on the outer div.
Below is an example
$('.outer').click(function(e){
alert("You clicked text in the div");
});
$('.inner').click(function(e){
alert("You clicked the button, but the div event handler will not fire");
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<span>here is some text inside the div, click it</span>
<button class="inner">Click me</button>
</div>
You need to use stopPropagation function:
http://www.w3schools.com/jquery/event_stoppropagation.asp
In your case you need to add this on image click event:
$('.click-img, .wishes').click(function (event) {
event.stopPropagation();
$('.flipWrapper').find('.card').toggleClass('flipped');
return false;
});
It looks like you need to stop the click event from the image bubbling up the DOM chain.
$('.click-img, .wishes').click(function (e) {
$('.flipWrapper').find('.card').toggleClass('flipped');
e.stopPropagation();
});
When you click on the image, that event is passed up to it's parent, in this case the <div>. That is by behavior. To stop that from ocurring, you call the stopPropagation() function that is part of the incoming event argument for the click event.
You can use Event.stopPropagation(), to stop the click event bubble to its parents, but you also need to add a param event, so your function can access it without browser issue.
// VVVV pass `event` as createFirework's param.
<img id="fire" onclick="createFirework(event)" src="http://placehold.it/50x50" />
But I'd suggest that answers that separate js part and html part would be better. Just like Jamiec's.
function createFirework(event) {
console.log('inner');
event.stopPropagation();
}
$('.click-img, .wishes').click(function () {
console.log('outer');
return false;
});
#clcbox {
width: 100px;
height: 100px;
border: solid 1px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clcbox" class="click-img">
<img id="fire" onclick="createFirework(event)" src="http://placehold.it/50x50" />
</div>
How can I trigger an event when a div changes its height or any css attribute?
I have a div with id = mainContent. I want jquery to automatically trigger an event when it changes its height. I did something like this:
$("#mainContent").change('height', function() {
$("#separator").css('height', $("#mainContent").height());
});
I know its wrong.
Here's my whole code (I pasted all of it because I can't get into jsfiddle for some reason I don't know):
$(document).ready(function() {
$("#separator").css('height', $("body").height());
});
$(function() {
$("#btnSample1").click(function() {
$("#mainContent").css('height', '400px');
$("#mainContent").css('width', '600px');
$("#mainContent").css('background-color', '#F0F0F0');
});
$("#btnSample2").click(function() {
$("#mainContent").css('height', '1600px');
$("#mainContent").css('width', '700px');
$("#mainContent").css('background-color', '#F0F0F0');
});
$("#mainContent").change('height', function() {
$("#separator").css('height', $("#mainContent").height());
});
});
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#separator {
border-right: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width: 100%;">
<tr>
<td valign="top" style="width: 19%;">
<table id="mainMenu">
<tr><td><input id="btnSample1" type="button" value="Sample 1" /></td></tr>
<tr><td><input id="btnSample2" type="button" value="Sample 2" /></td></tr>
</table>
</td>
<td valign="top" style="width: 1%;" >
<div id="separator"></div>
</td>
<td valign="top" style="width: 80%;">
<div id="mainContent"></div>
</td>
</tr>
</table>
I am trying to adjust the height of the div id=separator based on the height of mainContent whenever the height of mainContent changes.
PS: In this case I know I can use the button event to do this but I want the div to trigger the event when the height is changed.
First, There is no such css-changes event out of the box, but you can create one by your own, as onchange is for :input elements only. not for css changes.
There are two ways to track css changes.
Examine the DOM element for css changes every x time(500 milliseconds in the example).
Trigger an event when you change the element css.
Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.
First way:
var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
if ($element.css('height') != lastHeight)
{
alert('xxx');
lastHeight = $element.css('height');
}
setTimeout(checkForChanges, 500);
}
Second way:
$('#mainContent').bind('heightChange', function(){
alert('xxx');
});
$("#btnSample1").click(function() {
$("#mainContent").css('height', '400px');
$("#mainContent").trigger('heightChange'); //<====
...
});
If you control the css changes, the second option is a lot more elegant and efficient way of doing it.
Documentations:
bind: Description: Attach a handler to an event for the elements.
trigger: Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
Please don't use techniques described in other answers here. They are either not working with css3 animations size changes, floating layout changes or changes that don't come from jQuery land. You can use a resize-detector, a event-based approach, that doesn't waste your CPU time.
https://github.com/marcj/css-element-queries
It contains a ResizeSensor class you can use for that purpose.
new ResizeSensor(jQuery('#mainContent'), function(){
console.log('main content dimension changed');
});
Disclaimer: I wrote this library
For future sake I'll post this. If you do not need to support < IE11 then you should use MutationObserver.
Here is a link to the caniuse js MutationObserver
Simple usage with powerful results.
var observer = new MutationObserver(function (mutations) {
//your action here
});
//set up your configuration
//this will watch to see if you insert or remove any children
var config = { subtree: true, childList: true };
//start observing
observer.observe(elementTarget, config);
When you don't need to observe any longer just disconnect.
observer.disconnect();
Check out the MDN documentation for more information
Another simple example.
For this sample we can use 100x100 DIV-box:
<div id="box" style="width: 100px; height: 100px; border: solid 1px red;">
// Red box contents here...
</div>
And small jQuery trick:
<script type="text/javascript">
jQuery("#box").bind("resize", function() {
alert("Box was resized from 100x100 to 200x200");
});
jQuery("#box").width(200).height(200).trigger("resize");
</script>
Steps:
We created DIV block element for resizing operatios
Add simple JavaScript code with:
jQuery bind
jQuery resizer with trigger action "resize" - trigger is most important thing in my example
After resize you can check the browser alert information
That's all. ;-)
As far as regards the height or any other dimension parameter, you can use the ResizeObserver interface.
First, you get your HTML element:
const divElem = document.querySelector('#mainContent');
The element type is not restricted to DIVs, it can be anything.
Then, you create an instance of the ResizeObserver interface:
let myObserver = new ResizeObserver(entries => {
console.log("Height changed. New height: "+$("#mainContent").height());
});
Finally, you call the observe() method, which starts the specified element:
myObserver.observe(divElem);
Each time the element will be resized, the observe() method will be triggered.
Please note: the ResizeObserver interface does not work with Internet Explorer.
Other valuable answers are here:
How to detect DIV's dimension changed?
What I'm trying to do here is to show a loading box that follows cursor after submitting a form using MooTools. However, I've simplified the problem into just 1 div and 1 form.
script:
document.addEvent('domready', function(){
$('test_form').addEvent('submit', function(){
var box = $('box');
document.addEvent('mousemove', function(e){
box.setStyles({
top: e.page.y,
left: e.page.x
});
});
box.setStyle('display', 'block');
return false;
});
});
html:
<div id="box">
</div>
<form id="test_form" action="">
<label>Name: </label><input type="text" name="name" /><br/>
<input type="submit" value="Submit" />
</form>
css:
#box {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
display: none;
}
#test_form {
margin-left: 150px;
}
When the form is submitted, it will show the hidden blue div and it will follow the cursor. However, I can't make the div appear at mouse position when the form is submitted. The 'mousemove' will not fire until we move the mouse; thus, the blue div appears at position (0,0) immediately after showing. Is there a way to get the mouse position right after the form is submitted? Or is there an alternative way to do it?
Any suggestions is greatly appreciated!
Updated:
I don't want to add mouse event (mousemove) before the form is submitted. The reason is simply because I don't want the javascript to keep on checking the mouse position when it's not necessary. Just try to avoid performance issue!
basically, the submit is an event but its event.type is submit and it won't contain mouse info.
your bet is to re-arrange your javascript so it moves the box quietly all the time and just shows the box by changing display when submitted. something like that:
http://jsfiddle.net/jtLwj/
(function() {
var box = $('box');
document.addEvent('mousemove', function(e) {
box.setStyles({
top: e.page.y,
left: e.page.x
});
});
$('test_form').addEvent('submit', function(ev) {
ev.stop();
box.setStyle('display', 'block');
var sizes = box.getPosition();
box.set("html", [sizes.x, ' x ', sizes.y].join("<br/>"));
});
})();
reading the box position after submit will return your cursor :)
downside: latency of changing css for the invis box before submit.
edit better version w/o the change to dom all the time:
(function() {
var lastEventObject, eventListener = function(e) {
// keep a scoped referene of the last known mouse event object
lastEventObject = e;
};
document.addEvent('mousemove', eventListener);
document.id('test_form').addEvent('submit', function(e) {
e.stop();
// not needed anymore...
document.removeEvent("mousemove", eventListener);
// show the box at last known mouse loc
document.id("box").setStyles({
display: 'block',
left: lastEventObject.page.x,
top: lastEventObject.page.y
});
// attach to mousemove or whatever....
});
})();
this is as good as it will get, I'm afraid. the footprint of the reference to the event object is minimal at best.
fiddle: http://jsfiddle.net/dimitar/jtLwj/1/