This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I want to delete the paragraph that jquery create when I click the paragraph.
<p class="test">cutsom event</p>
<button class="clcik">click</button>
jquery:
$(function () {
"use strict";
$(".test").on("click", function () {
$(this).hide();
});
$("button").on("click", function () {
$("<p>delet this paragraph</p>").insertAfter($(this));
});
$("p").on("click", function () {
(this).hide();
});
});
update:
#LinkinTED solved it, but dose there best practice for for that code?
When you call this:
$("p").on("click", function () {
$(this).hide();
});
your paragraph doesn't exist yet, so this doesn't actually do anything.
You can do $('body').on('click','p', function(){}) instead
Your function will work on the paragraphs that are static in the page. However the dynamic added paragraphs won't. You'll need to bind the function on a static element.
$(function () {
/* obsolute while the last function is the same
$(".test").on("click", function () {
$(this).hide();
});*/
$("button").on("click", function () {
$("<p>delet this paragraph</p>").insertAfter($(this));
});
$(document).on("click", "p", function () {
$(this).hide();
// ^------ you forgot the $ here
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="test">cutsom event</p>
<button class="click">click</button>
Related
Can you select an image based on id using jQuery? Because when I tried it, it didn't work. Is this the correct way? Thanks
$(document).ready(function () {
$("#imageID").click(function (){
$("#imageID").addClass("className");
});
});
This could be happening because the element is not inside the DOM when you bind the event. Then you could try to bind with jquery using on function and binding the event to body for instance:
$(document).ready(function () {
$("body").on("click", "#imageID", function (){
$(e.target).addClass("className");
});
});
First, check duplicate id's.
Better way:
$(document).ready(function () {
$("#imageID").on('click', function (){
$(this).addClass("className");
});
});
Also, it add new classname only to clicked image, not to all images, so this is right way.
Your problem may occures because you have thow or more tags with #imageID id.
So, more better way is using js-* classes:
<img src="/images/img.png" class="js-my-image" alt="">
Code:
$(document).ready(function () {
$(".js-my-image").on('click', function (){
$(this).addClass("className");
});
});
If image is added after page loads, right code:
$(document).ready(function () {
$(document).on('click', '.js-my-image', function (){
$(this).addClass("className");
});
});
or
$(document).ready(function () {
$(".js-my-image").live('click', function (){
$(this).addClass("className");
});
});
I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?
Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")
You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});
You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/
you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>
Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});
concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>
If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});
i have a link on html
Veja aqui ยป</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically
Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle
If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});
Here's main part of html:
<div id="table">
<div class="table_item">asd</div>
<div class="table_item">asd</div>
<div class="table_item">asd</div>
</div>
And JS (JQuery):
$(document).ready( function()
{
$(".table_item").click( function()
{
alert($("#table").index($(this)));
});
});
click handling works but I ALWAYS get -1 from .index.
trying simply $(this).index(); shows the same result.
Please help! What's wrong with the code?
Do this instead:
$(document).ready( function()
{
var ti = $('.table_item');
ti.click( function()
{
alert(ti.index(this));
});
});
EDIT: Someone had a post that was deleted that was correct, and I think a little better than my code above:
$(document).ready( function()
{
$('.table_item').click( function()
{
alert($(this).index());
});
});
Working examples of both solutions: http://jsfiddle.net/FishBasketGordo/rx5e7/
You need to call index on a collection, in this case divs with class table_item
alert($(".table_item").index(this));
Since you are attaching a click() listener to $(".table_item"), you can reference the object by using $(this).
Try:
$(document).ready( function()
{
$(".table_item").click( function()
{
alert($(this).index());
});
});
question from a beginner..
I want to show/hide an inner div when the mouse enter/out from the parent div. I tried first with onmouseover, onmouseout events, but the problem is that onmouseover keep firing while the mouse over the div, and I want it to fire one time only.
I found JQuery events that might help me, but I don't know where can I put this code because my divs exist in a template for a control, and there is no onload event for the div.
<script type="text/javascript" language="javascript">
// Where should I call this !!!
function Init(sender) {
$(sender).bind("mouseenter", function () {
$(sender.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(sender.childNodes[1], this).hide(500);
});
}
</script>
Any help!
You can use mouseenter and mouseleave events.
You can put your code in the and bind your with these events.
<script type="text/javascript" language="javascript">
$(document).ready(function(){
Init('.your_div_class');
});
function Init(sender) {
$(sender).bind("mouseenter", function () {
$(sender.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(sender.childNodes[1], this).hide(500);
});
}
</script>
Thanks for everybody. as YNhat said, I have to use classes instead of Ids. and this is the code that I used and it's work well.
$(document).ready(function () {
InitEntities();
});
function InitEntities() {
var parentDiv = $(".parentDivClass");
parentDiv.each(function (index) {
var childDiv = $(this).children(".childDivClass");
$(this).bind("mouseenter", function () {
$(childDiv, this).show(250);
}).bind("mouseleave", function () {
$(childDiv, this).hide(250);
});
});
}
css
.parent_div .inner_div
{
display:none;
}
.parent_div:hover .inner_div
{
display:block;
}
This is what I use in a script.
Once the document is fully loaded ($(document).ready) the mouseover event is bound.
I then unbind the event when I'm in it (to prevent it from spamming the event) and bind the mouseleave event.
$(document).ready(function() {
$("#loginformwrapper").bind("mouseover", showLoginForm);
});
function showLoginForm() {
$("#loginformwrapper").unbind("mouseover", showLoginForm);
$("#loginform").animate({
top: '+=80'
}, 1000, function() {
$("#loginform").bind("mouseleave", hideLoginForm);
});
}
function hideLoginForm() {
$("#loginform").unbind("mouseleave", hideLoginForm);
$("#loginform").animate({
top: '-=80'
}, 1000, function() {
$("#loginformwrapper").bind("mouseover", showLoginForm);
});
}
Use this:
<script type="text/javascript">
$(function(){
var mydiv = $("#parent_div_id");
$(mydiv).bind("mouseenter", function () {
$(mydiv.childNodes[1], this).show(500);
}).bind("mouseleave", function () {
$(mydiv.childNodes[1], this).hide(500);
});
});
</script>
replace the "parent_div_id" with the id of your parent div