I've been using JQuery and I tried my code on JFiddle and it worked fine but when I do it on my site it doesn't work at all, basically I need a event to be sent when a list item in my userlist is clicked.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://dl.dropbox.com/s/r5pzakk4ikvck3t/style.css?dl=1">
<script src="https://www.dropbox.com/s/2hdvqa4ma51m0pw/jquery-1.9.0.min.js?dl=1"></script>
<title>Chat</title>
</head>
<body>
<div id="userlist-container">
<div id="userlist-title">User List</div><br />
</div>
<div id="main-container">
<div id="messages">
</div>
</div>
<div id="control-container">
<input type="text" id="TxtMessage" placeholder="Message" onKeyPress="SendMsg(event)" style="text-align:center;" >
</div>
<div id="alert-container" hidden="hidden">
<div id="alert-main">
<span id="alert-content"></span>
</div>
</div>
</body>
</html>
Javascript
$("#userlist-container > li").click(function(e) {
alert("TEST");
var username = "#" + this.html + " ";
$("TxtMessage").value(username);
$("TxtMessage").focus();
});
EDIT:
Once the page has loaded it connects to the server and adds <li>lalala</li> inside the userlist-container.
Your selector in the bind is wrong:
$("#userlist-container > li")
There is no li your HTML is:
<div id="userlist-container">
<div id="userlist-title">User List</div><br />
</div>
Also you seem to be missing # for the id selector inside the event.
So your event should probably be similar to:
$("#userlist-container > div").click(function(e) {
alert("TEST");
var username = "#" + this.html + " ";
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
});
Edit
should have probably told you guys that once it does some wizzard
stuff, li's get added so there are actually li tags in there.
I added your code to a fiddle and no li tags seem to be added when inspecting the DOM.
The fiddle
That could be just the fiddle though, not sure. I'm assuming if the li tags are injected that you need to use delegate binding using on if you are using jquery 1.7 or later or delegate if you are using 1.6 or earlier.
Similar to this:
// jQuery 1.7 or later
$("#userlist-container").on("click", ">li", function(){
alert("TEST");
var username = "#" + this.html + " ";
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
});
// jQuery 1.4.3 to 1.6.x
$("#userlist-container").delegate(">li", "click", function(){
alert("TEST");
var username = "#" + this.html + " ";
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
});
Your selectors are wrong, add the # prefix to indicate an id
$("#TxtMessage").value(username);
$("#TxtMessage").focus();
If your click event isn't even firing, make sure that you are attaching the event after the document is loaded
$(document).ready(function(){
//code here
});
Related
What I'm trying to accomplish is make a div visible when hovering over another using the .hover() method, addClass and removeClass. But what happens is that when I hover over the added div, it reads that I'm no longer hovering over the div specified (or at least that's what I assume) in the .hover() method. This causes the div to flash on and off the screen repeatedly. How can I fix this so this problem doesn't happen? Here is the code:
JS
$(document).ready(function(){
$('.building').hover(
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).addClass('active');
},
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).removeClass('active');
}
);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function abc() {
document.getElementById("Div2").style.display="";
}
</script>
</head>
<body>
<div onmouseover="abc()">Div1</div>
<div id="Div2" style="display:none">Div2</div>
</body>
</html>
If the balloon overlaps the Div, it captures the event “onmouseover”.
If you don’t have to deal with it, you could use css rule to prevent any action
.balloon {
pointer-events: none;
}
This rule allows the event to pass through the balloon, as if it didn’t exist.
I would really appreciate your help here. I want list item that is created with the "#save" button to be removed on click. The commented methods don't work. If i put 'h1' or something else it works no problem. Also the "#delBtn" button removes all list items no problem. But i cant;t make it work when i click on a list item to be removed. Thanks for your time in advance.
function Contact(first, last) {
this.firstName = first;
this.lastName = last;
}
$(document).ready(function() {
let a_contacts = [];
$("#delBtn").click(function(){
$("li").remove();
});
$("#save").click(function(){
event.preventDefault()
var inputtedFirstName = $("input#new-first-name").val();
var inputtedLastName = $("input#new-last-name").val();
var newContact = new Contact(inputtedFirstName, inputtedLastName);
$("ul#contacts").append("<li class='contact'>" +'First Name: '+ newContact.firstName + ' Last Name: '+ newContact.lastName + "</li>");
a_contacts.push(newContact);
$("input#new-first-name").val("");
$("input#new-last-name").val("");
});
//---------------------------------------------------------------
// $("li").click(function() {
// $(this).remove();
// });
// $('li').click(function(e){
// $(e.target).remove();
// });
});
<!DOCTYPE html>
<html>
<head>
<link href="CSS/bootstrap.css" rel="stylesheet" type="text/css">
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<script src="JS/jquery-3.2.1.js"></script>
<script src="JS/myjava.js"></script>
<title>Address book</title>
</head>
<body>
<div class="container">
<h1 id="haha" >Address book</h1>
<div class="row">
<div class="col-md-6">
<h2>Add a contact:</h2>
<form id="new-contact"><!-- form -->
<div class="form-group">
<label for="new-first-name">First name</label>
<input type="text" class="form-control" id="new-first-name">
</div>
<div class="form-group">
<label for="new-last-name">Last name</label>
<input type="text" class="form-control" id="new-last-name">
</div>
<button id="delBtn" class="btn">Add</button>
<button id="save" class="btn">Save</button>
</form><!-- form -->
<h2>Contacts:</h2>
<ul id="contacts">
</ul>
</div>
<div class="col-md-6">
<div id="show-contact">
<h2></h2>
<p>First name: <span class="first-name"></span></p>
<p>Last name: <span class="last-name"></span></p>
</div>
</div>
</div>
</div>
</body>
</html>
Try a delegated event listener. I believe that since these elements are being created dynamically, the event listeners don't find them and attach when the page loads. Try doing something like this:
`$(document).on('click', 'li', function () {
$(this).remove();
})`
What is happening is the document takes the event listener on page load and passes click effects to all li's after they are created.
This is most probably because you bind your click event on li elements that are already in your page at load time, and only at load time. This event won't apply for dynamically created new items…
Try this so answer.
If you want remove element li created by after document ready. You need use function delegate
Or you can write as below
$(document).on('click','li', function(){
var el = $(this);
el.remove();
});
This simple code should remove li items when clicked in the ul with id contacts.
$('#contacts').on('click', 'li', function (event) {
$(event.target).remove()
});
I have the following on html
<html>
<head>
<script src="../3003_Testing/js/jquery/dist/jquery.js"></script>
<script src="../3003_Testing/js/search.js"></script>
<title>Search Box</title>
<link href="mycss.css" rel="stylesheet">
</head>
<body>
<section class="main">
<form class="search" >
<input id="searchAddress" type="text" name="q" placeholder="Search address" oninput="getAddress()" />
<ul class="results" id="addressList">
<li id="staticli">Static li element<br><span>This is a Static li element</span></li>
</ul>
</form>
</section>
</body>
</html>
I am trying to get write a function to handle the event when any of the list element get clicked. But it doesn't seems to be triggering at all when I click on the <li> element.
$('#addressList').on('click', 'li', function() {
alert("clicked");
alert( $(this).text() );
});
The <li> elements are created dynamically through this code:
listContents = $("<li id=\"" + i + "\">" + addresses[i].lable + "</li>");
jQuery('#addressList').append(listContents);
And I verified through my browser's console that they are being created correctly as such
outerHTML: "<li id="0">6 Cashew Crescent<br><span>6 Cashew Crescent. (S)679751</span></li>"
Let's ignore about the dynamic list first. The thing is even my static list element are not responding to the event handler upon click. Have been trying to figure out the problem for a couple of hours now..
I have created a jsfiddle for my static li element not working https://jsfiddle.net/tmu50t9z/
jsfiddle to my whole code > https://jsfiddle.net/8wwnx64x/
$('#addressList li').on('click', function() {
alert("clicked");
alert( $(this).text() );
});
Work code, try this
HTML
<ul class="results" id='addressList'> </ul>
<button id="aaa">Add LI</button>
JavaScript
var a=0;
$('#aaa').click(function() {
$('#addressList').append('<li id="'+a+'">6 Cashew Crescent<br><span>6 Cashew Crescent. (S)679751</span></li>');
a++
});
$( "#addressList" ).on( "click", "li", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
i want to refrence all anchore tags on page that have
<body>
<h1>not me</h1>
<h1>not me also </h1>
<h2>me also as i am H2 </h2>
<h3>not me also </h3>
<h2>me also as i am H2 </h2>
<button onclick="score2Dmatrix();" id="btn" ></button>
h2 tag as their parent using jquery , for that i have to pass through each anchor tag that have parent h2 and then add attribute
onclick="callme();";
i am using that code onclick
<script>
function callme() {
$("h2 a").each(function () {
$(this).attr("onclick", "score2Dmatrix();");
});
};
</script>
but no effort
link to fiddle is this jsfiddle
thanks for that tobby answers is right
selector(h2 + a)...
Please see: https://jsbin.com/towejoqudu/edit?html,js,console,output
I have added text into your anchors so you can actually click them.
$('h2').find('a').on('click', callme);
You can avoid all of the unnecessary traversal by binding to the body once (event delegation), like so:
$('body').on('click', 'a', function(){
var $clicked = $(this);
if($clicked.closest('h2').length){
callme();
}
});
EDIT: The original error was a typo. I will rewrite it so it stays useful to the community.
How to disable all links with a certain class (e.g. ".disabled") from linking without adding a handler to each element?
The advantages of this approach is that it would work with every link (or element) with this class no matter if they were added dinamically or changed their classes during the life cycle of the webpage.
It is acceptable (for this use case) if the solution stops the "click" event from bubbling.
It is not acceptable (for this use case) to remove the href attribute, it might be "not disabled" later.
DEMO with the debugging and listing all delegated events.
You can use jQuery's .on() method on the container, and you wont have the bulk of hundreds of click events.
HTML:-
<div id="container"> // #container has the event handler assigned
<a>content</a>
Disabled
Not disabled
<a>content</a>
</div>
jQuery
// Whenever <a> elements that descend from #container get
// clicked the click event handler will fire.
$('#container').on( 'click','.disabled', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
You will have to attach an event to each element (this will do it):
$(".disabled").click(function(e){
e.stopPropagation();
e.preventDefault();
});
Apply following class to all a elements:
.not-active{
pointer-events: none;
cursor: not-allowed;
}
$('a').addClass('not-active');
<div class="body">
Enabled
Disabled
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(".body").on('click','a',function(e){
if ($(this).is('.disabled')) {
e.preventDefault();
e.stopPropagation();
alert("Click disabled");
}
});
</script>
This works for me.
You can disable for redirect on linked url by this code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
google
<br />
Facebook
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
jQuery('body').click(function () {return false;});
</script>
</html>
<div id="container"> // #container has the event handler assigned
<a>content</a>
Disabled
Not disabled
<a>content</a>
</div>
$(document).ready(function(){
$('#container').on( 'click','.disabled', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
});
Simply replace the href links with void reference:
$('.disabled').each(function(i) {
if ($(this).attr('href')) $(this).attr('href', 'javascript:void(0);');
});
As a followup measure, in case you still need the actual links, you could save them to the object's data, then change them!
$('.disabled').each(function(i) {
var href = $(this).attr('href');
if (href) {
$(this).data('href', href)
.attr('href', 'javascript:void(0);');
}
});
Example
$('.disabled').each(function(i) {
var href = $(this).attr('href');
if (href) {
$(this).data('href', href)
.attr('href', 'javascript:void(0);');
}
});
setTimeout(function() {
$('.disabled').each(function(i) {
var href = $(this).attr('href');
if (href) {
var href = $(this).data('href');
console.log(href)
$(this).after($('<i />', { html: ' - My old Link was: <b>' + href + '<b />' }).fadeIn());
}
});
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
bob<br />
<p class="disabled">ron</p><br />
jane<br />
<h3 class="disabled">sally</h3><br />
trump<br />