Hope everybody is having a good day. I had this buton and code, which worked for me.
I also followed the jQuery documentation: https://api.jquery.com/click/
$(function () {
$("#btnName").click(function () {
console.log("test");
});
}
I then upgraded webpack and JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
If anybody can help me out that would be awesome. Thanks in advance.
Edit: HTML for button:
<!-- NEW CONTACT BUTTON -->
<div class="new-contact-buttons">
<div class="btn-grouped">
<button type="button" class="btn btn-default btn-block bottom" id="btnRetrieveCallerMatches" disabled style="display:none;">Retrieve
caller matches</button>
<button type="button" class="btn btn-default btn-block bottom" id="btnNewContactForm" disabled style="display:none;">New
contact</button>
</div>
</div>
I am now trying this code, but unfortunately its still not working:
$(function () {
$("#btnNewContactForm").click(function () {
console.log("######## clicked new contact")
});
});
I re-enable the button when I need it using:
$("#btnNewContactForm").show();
$("#btnNewContactForm").removeAttr("disabled");
And the button shows up so that piece of code works.
I also checked if the top function is being executed and it is.
Try this :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<button id="btnName">click me</button>
</body>
<script type="text/javascript">
$(document).ready(function () {
$("#btnName").on("click", function () {
console.log("test");
});
});
</script>
</html>
In each and every one of your examples you are forgetting to close your function, small syntax mistake, but the following code will work
$(function () {
$(document).ready(function() {
$("#btnName").click(function () {
console.log("test");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnName">Hi</button>
Just before the button code I had a sort method:
$(".phonebook table").tablesorter();
I think because the upgrade (webpack or jquery) this function stopped working and it wouldn't execute any code after this. So the code was fine all along but the binding code wasn't executing. Sorry for wasting everyones time.
When I put this code before the tablesorter everyting worked fine:
$("#btnNewContactForm").click(function () {
console.log("#######" + "saving new contact");
newContact();
});
$(function() {
$(document).on('click', "#btnName.app", function(e) {
e.preventDefault()
console.log("clicked");
});
});
you forgot to put ")" in the end of $(function(){...})
Related
I know whats wrong in code but i am not able to understand why jquery is doing that ,so let me explain my problem with following code
test.html
#############
<!doctype html>
<html class="no-js" lang="en">
<head>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
</head>
<body>
<div class="wrapper wrapper-layout"> <!-- Header with navigation - Start -->
<button id="btnTestMain" type="button" value="Adjust" class="btn btn-
red1">Button test MAIN</button>
<div id="injectHeaderMainHTML"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#injectHeaderMainHTML").load("/ui-test/test_page.html", 'f' + (Math.random() * 1000000));
$.getScript("js/test1.js", function() {
});
});
</script>
</body>
</html>
###test1.js######
$(document).ready(function() {
$("#btnTestMain").click(function (event) {
$.getScript("/ui-test/js/test.js").done(function() {
console.log("script loaded");
}).fail(function() {
console.log('problem in loading test js');
});
});
}); // Document Ready Closed
test_Page.html
###############################
<button id="btnTest1" type="button" class="btn btn-red1">Button test
1</button>
<button id="btnTest2" type="button" class="btn btn-red1">Button test 2</button>
test.js
###############
function testFunction()
{
console.log("test function called");
}
$(document).ready(function () {
$("#btnTest1").click(function (event) {
console.log("button1 clicked");
});
$("#btnTest2").click(function (event) {
testFunction();
});
});
Now every time i click btnTestMain, it adds event listener to btnTest1 and btnTest2 , so if i click btnTestMain 5 times there will be 5 click event listeners on btnTest1 and 5 on btnTest2.
Can anyone explain why this is happening? I know how to resolve the issue but i am not able to understand reason for duplicate event listeners.
Each time 'test.js' is loaded, jQuery adds the 'click' listener to the two button elements. The key here is that it will not remove any old ones, and that is why you are getting the duplication (which, in reality, isn't a duplication).
I want to test a simple JavaScript function in ASP.NET.
Movies/Index.cshtml
<!-- My local JavaScript File -->
<script src="~/Scripts/JavaScript.js" type="text/javascript"></script>
<input type="button" id="getPeople" value="Get People"/>
<ul id="people_list"/>
Views/Shared/_Layout.cshtml
<script src="~/Scripts/jquery-2.2.3.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/JavaScript.js" type="text/javascript"></script>
/Scripts/JavaScript.js
$(document).ready(function ()
{
});
$('#getPeople').click(function ()
{
alert("getPeople");
}
I press the button but no alert appears. Why?
The click handler of '#getPeople' should be inside $(document).ready
$(document).ready(function ()
{
$('#getPeople').click(function ()
{
alert("getPeople");
}
});
Make sure
to import jQuery first (before importing /Scripts/JavaScript.js)
to add click handler inside document's ready event.
Check the output of your composed page (for example Developer tools in the browser), if you are uncertain.
$(document).ready(function () {
$('#getPeople').click(function () {
alert("getPeople");
});
});
I'm having trouble getting the following to work:
$('#elem').trigger('click');
When I run it, it doesn't trigger a click but it doesn't show any error logs in the console either.
I've also tried the following with no luck:
$('#elem')[0].click();
Any ideas as to what could be going wrong or a solution for this?
Update: Jquery is working and when I inspect the element, #elem does appear (it's an id for a button)
HTML:
<a:button id="elem">My Button</Button>
JQuery:
P.when('A', 'jQuery').execute(function (A, $) {
//when this function is called, it should trigger a button click
triggerButtonClick = function() {
$('#elem').trigger('click');
};
});
Try it in document.ready function, then all dom loads when the document is ready.You can do something like this based on your requirement.
$( document ).ready(function() {
$('#radio').click(function(){
$('#elem')[0].click();
})
});
i have tried this code and it works
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("chk1").click(function(){
$('#usr').trigger('click');
});
});
</script>
</head>
<body>
<form action="sample.php">
<button id="chk1">click</button>
<input class="form-control" type="submit" id="usr">
</form>
</body>
</html>
this code works for me:
$(window).load(function() {
$('#menu_toggle').trigger('click');
});
$(document).ready(function () {
$('#elem').click(function () {
alert('clicked');
$(this).css('color', 'red');
});
$('#elem').trigger('click');
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="elem" >test</div>
</body>
</html>
I was trying to validate form using jquery but button click event not firing in IE .
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnResubmit2').click(function () {
alert('btnResubmit2 Here');
});
});
</script>
HTML code
<asp:Button ID="btnResubmit2" runat="server" Text="Resubmit" onclick="btnResubmit2_Click"/>
Could you please help me to resolve this issue.
Try the following...
JS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnResubmit2').click(function () {
alert('btnResubmit2 Here');
});
});
</script>
HTML
<asp:Button id="btnResubmit2" runat="server" Text="Resubmit"/>
get rid of the onclick attribute.
<asp:Button ID="btnResubmit2" runat="server" Text="Resubmit" />
Thanks to all.
I was using Asp.net button and it was worked after done some changes like as below. I really appreciate your immediate reply.
$(document).ready(function () {
$('#<%= Button1.ClientID %>').click(function () {
alert('btnResubmit2 Here');
});
});
I want to use jquery to create an application using google apps scripts. But i got failed.
below is a example of what I am using. A basic one.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('#Hide').click(hideMe);
});
function hideMe(){
this.value = 'Clicked!';
}
</script>
</head>
<body>
<input type="button" name="Hide" id="Hide" value="Hide me" />
</body>
</html>
Here is a working JSFiddle of what you are trying to do:
HTML:
<input type="button" name="Hide" id="Hide" value="Hide me" />
JS:
$(document).ready(function() {
$('#Hide').click(function () {
$(this).val('Clicked');
});
});
Of course it can work also as this, it's the same:
$(document).ready(function() {
$('#Hide').click(hideme);
function hideme () {
$(this).val('Clicked');
}
});