What I'm trying to do with the following snippet should be self-explanatory
<tbody id="slide-table-body">
</tbody>
</table>
<button class="wp-core-ui button-primary" type="button" onclick="addAnotherSlide()">Add another carousel item</button>
<script type="text/javascript">
var newRowHtml = '<tr><td>(assetprevurl)</td><td>(asseturl)</td><td><button type="button" class="wp-core-ui button-primary deleteSlideButton">Delete Slide</button></td></tr>';
function addAnotherSlide() { jQuery('#slide-table-body').append(newRowHtml); }
jQuery(function($){
$('.deleteSlideButton').click(function() { $(this).closest('tr').remove();});
</script>
My problem is that
$('.deleteSlideButton').click(function() { $(this).closest('tr').remove();} );
isn't deleting the row and I can't figure out why.
This is because you're adding the html after the DOM is loaded, try using Jquery on :
$( ".deleteSlideButton" ).on( "click", function() {
console.log($(this));
});
It's cause you've attached an event handler to a newly created DOM element. Change it to:
$('.deleteSlideButton').on("click", function() {
// do something
});
This may also help: Difference between .on('click') vs .click()
Related
I want to add an onclick in and a button tag over jquery
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button>
<img id="loadingImage" src="preoader.gif" style="visibility:hidden">
I need it for this script
<script type="text/javascript">
function openImage(){
if ( document.getElementById('loadingImage').style.visibility == 'visible' )
{
document.getElementById('loadingImage').style.visibility='hidden';
} else {
document.getElementById('loadingImage').style.visibility='visible';
}}
</script>
you can add events like this:
$('#buttonid').on("click", function(){
//do something here like calling openImage();
});
you only need to give your button a unique id like this :
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0" id="buttonid"></button>
EDIT:
if you can not edit the button tag then you may need a different selector.
You can try to get a parent attribute to fetch the right child like this :
$('.parentclass button').on("click", function(){
//do something here like calling openImage();
});
or something like this
$('.parentclass div button').on("click", function(){
//do something here like calling openImage();
});
EDIT SOLUTION:
$(".mejs-play button").on("click", function(){
openImage();
});
You can use this code :)
$(document).ready(function(){
$("#btn").on("click", function(){
var img = $("#loadingImage");
if(img.is(":visible")) {
img.css({"display" : "none"})
} else {
img.css({"display" : "block"})
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btn">Click Here</button>
<img id="loadingImage" src="https://b-digital.info/wp-content/uploads/2018/09/preoader.gif">
If you can't change the html code, you can try using some of the attribute value for the selection part of the jQuery, like in next example:
$("button[title='Play']").click(function()
{
// Just for debugging on the console.
console.log("Click detected on PLAY button");
// Call the openImage() method.
openImage();
});
Your mistake here is trying to mix native js with JQuery.
When you select an item with lets say let item = document.getWhatever then you cant
use Jquery functions on this item so you have to select it from the beginning on with JQuery's method let item = $(#myItem).
Afterwards you can use Jquery functionallity to add an onclick event.
Either by setting the onclick as attribute like this:
item.attr('onclick', 'doStuff()');
or by using the .click() like so:
item.click(function() {
doStuff
});
based on your example you can add:
onClick="openImage();"
event handler on your button:
<button type="button" onClick="openImage();" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button>
Try it on codepen.
Please bear my ignorance.
I have a page with one button on it:
How to detect if the user clicks (on a computer) or touches (smarthone, tablet) this button?
I read the answers of this quite similar question but the solutions involves using advanced and comlicated libraries. I am just a beginner: d you know how to do this in simle JavaScrit or jQuery ?
Determine and bind click or "touch" event
Thank you all.
you could try to use a variable for this if you would like, maybe try
<script>
var buttonTouched = 0;
function anyFunc01() {
buttonTouched = 1;
}
function anyFunc02() {
if(buttonTouched == 1) {
console.log("button01 has been clicked at some point");
}
}
</script>
<button onclick="anyFunc01()">button01</button>
<button onclick="anyFunc02()">button02</button>
JAVASCRIPT
With your button use
<button onclick="myFunction()">Click me</button>
Then write your myFunction() in <script> in javascript. like this
<script>
function myFunction()
{
alert('Button clicked');
}
<script>
Read more here
http://www.w3schools.com/jsref/event_onclick.asp
JQUERY
Inlcude the jquery.js in your file then give button an ID then use a script.
Button:
<button id="submitbutton">Submit</button>
Jquery
$( "#submitbutton" ).click(function() {
alert( "Submit button clicked!." );
});
TOUCH OR CLICK JQUERY
But from what I know, the problem you can face here is the touch. Here is a code that could make for touch or click
$( document ).ready(function() {
$('#submitbutton').on('click touchstart', function() {
alert( "Submit button clicked!." );
});
});
Jsfiddle
https://jsfiddle.net/0xdLjvtu/
use jQuery!
var deviceEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(deviceEvent ,function(){alert('click true!');});
I have a script that adds a <tr> dynamically, outside it seems that the elements contained in it are not recognized by jQuery because it is not yet loaded into the DOM.
I try to use .on function , but it is not working.
Have you an idea ?
$(document).ready(function(){
$("#add_item").click(function(e){
e.preventDefault();
var nbeTr = $(".tablerow").length;
if (nbeTr < 10){
$(".tablerow:last").after("<tr class='filleul'><td></td><td></td><td></td><td><button class='newtr'>X</button></td></tr>");
}
});
$(document).on("click", ".newtr", function(event) {
event.preventDefault();
alert("Yo");
});
});
You'll need to register the event listener when creating the button element. Right now you're trying to register click events to undefined elements.
// create button
$ele = $("<button class='newtr'>X</button>");
// bind event listener to button
$ele.on("click", function() { alert("hello"); });
// insert $ele into DOM
$target.append($ele);
Hey Buck your code is working, I think problem is some where else.
See this working example:
$(document).ready(function() {
$("#add_item").click(function(e) {
e.preventDefault();
var nbeTr = $(".tablerow").length;
if (nbeTr < 10) {
$(".tablerow:last").after("<tr class='tablerow filleul'><td>1</td><td>2</td><td>3</td><td><button class='newtr'>X</button></td></tr>");
}
});
$(document).on("click", ".newtr", function(event) {
event.preventDefault();
alert("Yo");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='add_item'>Add item</button>
<table>
<tr class='tablerow'>
<td>c1</td>
<td>c2</td>
<td>c3</td>
<td>
<button class='newtr'>X</button>
</td>
</tr>
<table>
Ok, the problem was a bad version of jQuery was using.
I just use CDN of last jQuery version and refresh cache and it's working.
So I am trying to edit the colour of a button when clicked.
here is my html and javascript
html:
<button type="submit" class="btn" id="hello-1" value="hello">Submit</button>
Here is my JS:
//Name:buttons.js
//Created by: Jonathan
//Created on: 25/09/15.
'use stict';
$( document ).ready(function(){
$('hello-1').click(function(){
document.getElementById('hello-1').style.background = "linear-gradient(#337AB7,#215480)";
});
});
I can't understand why it's not working. Any help?
Your selector is wrong. When you're selected an element by id with jQuery, you must add the # character before the id.
So instead of $('hello-1') use $('#hello-1')
$(document).ready(function() {
$('#hello-1').click(function() {
document.getElementById('hello-1').style.background = "linear-gradient(#337AB7,#215480)";
});
});
Edit:
Also when you are inside the click event handler you don't need to select the element again because this will point to the target element so your event handler can be as follows:
$(document).ready(function() {
$('hello-1').click(function() {
this.style.background = "linear-gradient(#337AB7,#215480)";
});
});
If you're using jQuery why not use it to change css? Also you're missing the #.
$( document ).ready(function(){
var $button = $('#hello-1');
$button.click(function(){
$button.css('background', "linear-gradient(#337AB7,#215480)");
});
});
I'd like a function t run when a button is clicked. It works fine when I approach it like so in the html body
<div type="button" id="decline" class="btn btn-danger mrs"></div>
However, I need it to work within the below code block, which is within a underscore.js wrapper. At the moment the function won't execute using the below, I'd like to understand why? is the id in the wrong place?
$('#containerFriendsPending').empty();
_.each(friends, function(item) {
var wrapper = $('<div class="portfolio-item-thumb one-third"></div>');
wrapper.append('<div type="button"
id="decline"
class="btn btn-danger mrs">' +
'Decline' +
'</div>');
$('#containerFriendsPending').append(wrapper);
});
While the code solution you posted will work the first time:
$('#decline').click(function() {
Friendrequest_decline();
});
It will not work after the wrapper code is replaced, as per your answer. You must use .on() to delegate the event:
$(document).on('click', '#decline', function() {
Friendrequest_decline();
});
or
$('#containerFriendsPending').on('click', '#decline', function() {
Friendrequest_decline();
});
Eg:
$(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})
Solved this myself.
The following needed to be added within the original question main code block
$('.decline').click(function() {
Friendrequest_decline();
});
So doing this works.
$('#containerFriendsPending').empty();
_.each(friends, function(item) {
var wrapper = $('<div class="portfolio-item-thumb one-third"></div>');
wrapper.append('<div type="button" id="decline" class="btn btn-danger mrs">' + 'Decline' + '</div>');
$('#containerFriendsPending').append(wrapper);
$('.decline').click(function() {
Friendrequest_decline();
});
});
As you didn't provide the code that launches the click event it's hard to debug, but I'm going to assume it's actually the most common mistake that causes this problem: You are binding the click event before the element actually exists. That way, the browser will not know the new element also needs the click event.
Example:
$('.test').click(someFunction);
$('body').append( $('<div class="test">Click me!</div>');
This will not work, because the click event is bound first and the element is created later.
The jQuery .on() function can handle that by also watching for new elements that are created in the DOM:
$('body').on('click', '.test', someFunction);
$('body').append( $('<div class="test">Click me!</div>');
Now it will run someFunction successfully.