I have a following code, i want to remove label and Input Box on click, but it is not working
no any alert is shown, nothing is seen over the console.. really disappointed
<div id="Div1" class="span5 well droppedFields ui-droppable ui-sortable">
<div class="draggableField ui-draggable droppedField" style="z-index: 10;" id="CTRL-DIV-1002">
<div style="z-index: 11;"><span id="LabelU2">LastName : </span></div>
<div style="z-index: 12;">
<input name="LastName" type="text" id="LastName"></div>
</div>
</div>
my jquery
$('.draggableField ui-draggable droppedField').on('click', function () {
$(this).parent('div.DivHTML').remove();
alert("hi");
});
Help is apperciable. thnx
Your selector doesn't point to anything. There is no draggableField that has a child ui-draggable that has a child droppedField. Do you mean a div that has all three classes?
$('.draggableField.ui-draggable.droppedField').on('click', function () {
$(this).hide();
alert("hi");
});
UPDATED CODE: Removed the OP code to remove() element and replaced with hide()
Take a look to this Fiddle
$('.draggableField').on('click', function() {
$(this).find("input").remove();
$(this).find("#LabelU2").html('');
});
you don't have DivHTML in there:
use:
$(document).ready(function(){
$('.draggableField.ui-draggable.droppedField').on('click', function () {
$(this).parent('div').remove();
alert("hi");
});
});
Can we see more details on your project? If it's working in jsfiddle but not in your project it seems like something else is missing. Are you loading jquery or your specific script into your html page properly? To get down to the problem we need more to go off of.
Related
I am trying to implement onClick function for a div which is getting generated depending on some validations while submitting the page. I am trying to implement the same from an external js file.
HTML design is something like :
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
//dynamically generated
<div>
---
----
</div>
</div>
Now, I am trying to implement the onClick function like below :
$('img.popUpClose.popUpCloseQview').each(function (index) {
$(this).on("click", function (e) {
//DO something
});
});
But the issue is, this $('img.popUpClose.popUpCloseQview') element is not there in the code on the first time. After the submit button click valiations are happening and depending on the condition this pop up message is coming up and this function is not working anytime.
Tried some other options too. But none of these are working.
Please advise.
Thanks,
Aniket
If you are dynamically generating the div in jquery, you can add the click event then. For example:
var div = $("<div>");
div.click(function(){//dostuff});
$("#QViewInfo").append(div);
You could attach the click event to all the div's of element #QViewInfo using event delegation on() like :
$('#QViewInfo').on('click', 'div', function(){
//DO something
})
NOTE : No need for using each() loop.
Hope this helps.
$('#QViewInfo').append('<div>Div 3</div>');
$('#QViewInfo').on('click', 'div', function(){
console.log($(this).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
<div>Div 1</div>
<div>Div 2</div>
</div>
Working snippet with comment code :
var img = '<img src="/Images/...." onclick="alert(\'QView.close();\')" alt="Close Quick View" class="popUpClose popUpCloseQview">';
$('.oosInfo').append(img);
$('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){
alert("A");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo">
<div class="oosInfo">
<div class="alertImgDiv">
<span class="oosAlertImg"></span>
</div>
</div>
</div>
I am trying a way to click a anchor tag using Jquery which is inside multiple div.
Below is my code:
<div class="mainDiv">
<div id="secondDiv" class="check">
<div class="iteratorDiv1" id="id1">
link text
</div>
<div class="iteratorDiv2" id="id2">
link text
</div>
<div class="iteratorDiv3" id="id3">
link text
</div>
<div class="iteratorDiv4" id="id4">
link text
</div>
</div>
</div>
Now if i do something like this
$(".iteratorDiv1 a").live('click',function(e)
{
alert("hey working");
});
But using this approach i will have to write this function for iteratorDiv2,iteratorDiv3 and iteratorDiv4 also.
Is there any way i can identify the anchor click from the mainDiv something like below. This did not work though.
$(".mainDiv a").live('click',function(e)
{
alert("hey working");
});
I am just trying to prevent repeatative coding. Any guidance.
Please check the following jsFiddle:
http://jsfiddle.net/amoolya93/1xL9od85/3/
Your code works fine until Jquery version 1.8.3 .For later versions, please use the following:
$('.mainDiv a').on('click',function(e)
{ alert("hey working");
});
I just did some test here, and seem to work.
You might tell jQuery where exactly your "a" is, so you can try something like this:
$(".mainDiv div > a").on("click", function () {
alert("Hey it's working");
});
or
$(".mainDiv a").on("click", function () {
alert("Hey it's working");
});
$("a").on('click',function(e)
{
var parent = $(this).parent();
alert(parent.attr(class)) ;
});
Use .parent() method to get parent of any link you clicked.
I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.
So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});
try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});
Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});
to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.
$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});
You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.
THIS CODE UNDER HERE WORKS, you can read the answers under here - i edit this for future reference.
HTML:
<div>Show bank div and hide fancy div</div>
<div id="btn-bk">back</div>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
CSS:
#bank {display:none;}
#btn-bk {display:none;}
Javascript:
$('#btn').click(function(e){
$('#fancy, #btn').fadeOut('slow', function(){
$('#bank, #btn-bk').fadeIn('slow');
});
});
$('#btn-bk').click(function(e){
$('#bank, #btn-bk').fadeOut('slow', function(){
$('#fancy, #btn').fadeIn('slow');
});
});
Live DEMO that works
Your problem is with this line of code:
$('#bank').replace('<div id="fancy"></div>').fadeIn('slow');
There is no .replace() function in jQuery. Remove that and it works:
$('#bank').fadeIn('slow');
See it here: http://jsfiddle.net/3XwZv/57/
Use the following jQuery code:
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});
You should use html () instead of replace(). Also, assuming you want to replace your bank div with the following html:
<div id="fancy"></div>
Try this
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').html('<div id="fancy"></div>').fadeIn('slow');
});
});
<div class="test">
<button>Example</button>
<div class="example" style="display:none;">Blah</div>
</div>
<div class="test">
<button>Example</button>
<div class="example" style="display:none;">Another</div>
</div>
When button gets clicked, I want .example to .show, but only the .example that's in the current .test.
Another way that works for your particular HTML:
$('button').click(function(){
$(this).next('.example').show();
});
This will do exactly what you said:
$('button').click(function(){
$(this).closest('.test').find('.example').show();
});
This works too for the markup you posted, but it won't work if the button and .example are not siblings:
$('button').click(function(){
$(this).siblings('.example').show();
});
Hiya Working demo for your case here: http://jsfiddle.net/4bLZF/
this uses slideToggle http://api.jquery.com/slideToggle/
code
$(document).ready(function () {
// Watch for clicks on the "slide" link.
$('button').click(function () {
$(this).next(".example").slideToggle(400);
return false;
});
});