<div class="tools">TOOLS
<ul>
<li class="toolone">First
<div class="plugin">
<select>Option
<optios></options
</select>
</div>
</li>
<ul>
</div>
Jquery :
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
});
Hide show works perfect, but when I click on Inner Select option within li even it closes.
I tried event.stopPropagation();
Any help ?
try this:-
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
$('.toolone select').click(function(e){
e.stopPropagation();
})
});
Demo
Firstly there was error in your html. Updated your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="tools">TOOLS
<ul>
<li class="toolone">First
<div class="plugin">
<select>
<option>abc</option>
</select>
</div>
</li>
</ul>
</div>
</body>
</html>
Secondly, you must explicitly handle clicking of select to stop event propagation:
$(document).ready(function () {
$('.toolone').click(function () {
$(this).find('.plugin').toggle(200);
});
$('.toolone select').click(function (e) {
e.stopPropagation();
});
});
See the plunkr
Try this one:
$(document).ready(function () {
$('.toolone').click(function (e) {
if(e.target !== this) {
return;
}
$(this).find('.plugin').toggle(200);
});
});
Related
I would like to get value on click event from dynamically added elements but something goes wrong.
My code is:
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#myContainer").append("<div class='remove' value='myValue'>click to display value</div>");
});
$(document).on("click", ".remove" , function() {
alert($(this).val());
});
});
</script>
</head>
<body>
<button>Add new list item</button>
<div id="myContainer">
</div>
</body>
</html>
When I am clicking on the created dynamically div there is empty alert insted of myValue.
What should I change?
Try
$(document).on("click", ".remove" , function() {
alert($(this).attr('value'));
});
Instead of
$(document).on("click", ".remove" , function() {
alert($(this).val());
});
this should work for you. ↓↓
$(document).ready(function(){
$("button").click(function(){
$("#myContainer").append("<div class='remove' value='myValue'>click to display value</div>");
});
$(document).on("click", ".remove" , function() {
alert($(this).attr('value'));
});
});
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<button>Add new list item</button>
<div id="myContainer"> </div>
</body>
</html>
I want to make checkbox as radio but I not used radio I must be used checkbox but when I append checkbox it does not work as radio, plz how to set after appending checkbox as a radio,
code.
jQuery(function($){
$(".add").on('click', function(e) {
e.preventDefault();
var main_div = $('.append');
var new_offer = $("li:last", main_div).clone();
new_offer.appendTo(main_div);
});
$('input.check_one').on('change', function() {
$('input.check_one').not(this).prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="append">
<ul>
<li>
<input type="checkbox" name="offer[key]" class="check_one">
</li>
</ul>
</div>
<button class="add">add</button>
</body>
</html>
You need to change the way you attach event listener
jQuery(function($){
$(".add").on('click', function(e) {
e.preventDefault();
var main_div = $('.append');
var new_offer = $("li:last", main_div).clone().prop('checked',false);
new_offer.appendTo(main_div);
});
$('.append').on('change','input.check_one', function() {
$('input.check_one').not(this).prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="append">
<ul>
<li>
<input type="checkbox" name="offer[key]" class="check_one">
</li>
</ul>
</div>
<button class="add">add</button>
</body>
</html>
I want to toggle the messages 'Yes' and 'No' on the button click event, but that is currently not working with the below code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<button id="myButton">
Button
</button>
<br />
<span id="mySpan">
</span>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
JS custom.js
$(document).ready(function(){
$('#myButton').on('toggle',function(){
$('#mySpan').html('Yes');
},function(){
$('#mySpan').html('No');
});
});
There is no 'toggle' event - you can either use the jquery .toggle() function or use an .on('click') handler to then perform the toggle.
$( "#target" ).toggle(function() {
alert( "First handler for .toggle() called." );
}, function() {
alert( "Second handler for .toggle() called." );
});
var $mySpan = $('#mySpan');
$('#myButton').on('click', function(){
$mySpan.html( $mySpan.html() === 'Yes' ? 'No' : 'Yes' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">
Button
</button>
<br />
<span id="mySpan">
</span>
it doesn't do anything on the first click because it's only attaching the event handler at that point.
$(document).ready(function(){
$('#myButton').click(function(){
$("#mySpan").text() =="Yes"? $('#mySpan').text('No'):$('#mySpan').text('Yes');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">
Button
</button>
<br />
<span id="mySpan">
</span>
This works with toggle on the most recent version of jQuery. .toggle() now only displays or hides an element. There are various options you can use to control how that happens. This example starts with all elements present, but one of them is not displayed via CSS. jQuery .toggle() will toggle the display values on the elements with a class of mySpan.
$('#myButton').click(function(){
$('.mySpan').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<button id="myButton">
Button
</button>
<br />
<span class="mySpan">Yes</span>
<span class="mySpan" style="display: none">No</span>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
You just need to use .click event instead of .on.
Here is the working fiddle:
https://jsfiddle.net/mp5w4b8c/
And your jQuery should look like this:
$(document).ready(function(){
$('#myButton').click(function(){
$('#mySpan').html('Yes');
},function(){
$('#mySpan').html('No');
});
});
Update:
I changed my jQuery logic to this:
$(document).ready(function() {
$('#myButton').click(function() {
if($('#mySpan').html === "" || 'No') {
$('#mySpan').html('Yes');
} else if($('#mySpan').html === 'Yes') {
$('#mySpan').html('No');
}
});
});
but it doesn't work as i expected. Is there any issues in my code?
The updated fiddle: https://jsfiddle.net/mp5w4b8c/
var $elem = $('#mySpan');
$('#myButton').click(function(){
$elem.html( $elem.text().trim() === 'Yes' ? 'No' : 'Yes' );
});
This code should work fine for your case
I have the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/tau.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
<body onload="clickButton();">
<div class="ui-page" id="page_webkitui">
<header class="ui-header">
<h2 class="ui-title">Webkit UI demos</h2>
</header>
<div class="sample">
<input type="time" id="input_webkitui_hiddentime"
style="visibility: hidden; width: 50px"></input>
<div>
Hidden time:
<button class="ui-btn" id="button_webkitui_hiddendateopener"
style="display: block" onclick="alertTime()">Open timepicker</button>
<span id="webkitui_hiddentime_value"></span>
</div>
<script>
function alertTime() {
alert("fff");
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.click();
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
}
function clickButton() {
$(function() {
document.getElementById('button_webkitui_hiddendateopener').click();
//$('#button_webkitui_hiddendateopener').click();
});
}
(function() {
var page = document.getElementById("page_webkitui");
page.addEventListener(
"pagecreate",
function(ev) {
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
});
}());
</script>
</div>
</div>
<script type="text/javascript" src="js/tau.js"></script>
</body>
</html>
I want to "force" the button_webkitui_hiddendateopener button to be clicked once my page is loaded... (a timepicker is shown normally as a new window).
I implement two functions clickButton() and alertTime(), as a result: only the ffff alert is shown but the new window of the timepicker didn't show up.
What's wrong?
Thanks in advance!
$(document).ready( function() {
$('#button_webkitui_hiddendateopener').trigger("click");
});
Use trigger http://api.jquery.com/trigger/
Live Demo
Do anyone has similar experience? I would like to load an external file into current page by using .load("...") function. After loading, how can I trigger the click on an image in the <div id="tab-3-list">?
The script
$("#tab-3-list img.coupon_list").on("click", function (e) {}
doesn't function. If I embed the content of list.html into the current body, the above script works.
<html lang="en" class="ui-mobile">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<section id="home" data-role="page">
<article data-role="content">
<div id="home-content"></div>
</article>
<!-- content -->
</section>
<!-- home -->
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
</script>
</body>
</html>
External file list.html
<div id="tab-3-list">
<div class="ui-grid-a">
<div class="ui-block-a">
<img id="c01" class="coupon_list" src="/images/coupon/c01.png">
</div>
</div>
<!-- /ui-grid-a -->
</div>
<!-- /tab-3-list -->
Try to use event-delegation at this context since you are loading the DOM elements at runtime,
$("#home-content").on("click","#tab-3-list img.coupon_list",function (e) {
e.preventDefault();
alert(this.id);
});
try this..
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html", function(){
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
});
</script>
load uses ajax and thus takes sometime to load data from external page. When you are attaching click event to img.coupon_list, it's not even present in DOM ( in page ).
Try this,
$("#home-content").load("list.html", function () {
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
This is attaching click only when data from load is returned and added to the DOM.
Use event delegation - .on(), and to trigger click event use .trigger()
$(document).ready(function() {
$("#home-content").load("list.html",
function(){
$('#tab-3-list img.coupon_list').trigger('click');
});
$("#home-content").on("click","#tab-3-list img.coupon_list", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
-just put event in live mode , it's work after reload :
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#home-content").one("load",function(){
// everytime an image finishes loading
}).each(function () {
if (this.complete) {
// manually trigger load event in
// event of a cache pull
$(this).trigger("click");
}
});
$("#home-content #tab-3-list img.coupon_list").live("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
}); </script>