Capturing all links.
$("a").live("click", function() {
alert($(this).attr("class"));
});
jquery.truncate.js adds in this.
obj.html(str1 + "<div class='truncate-ellipsis' style='display: inline;'>" + options.ellipsisText +
"</div><div class='truncate-more' style='display: none;'>" + str2 + "</div>" +
"<div class='clear'></div>" +
"<a href='#' class='truncate-more-link'>" + options.moreText + "</a>"
);
But when i click the "showmore" on a truncate object (which is a description that exceeds some designated amount of characters), the click does not get captured! Any thoughts?
The content is added in through an ajax call to the server to get a bunch of peoples comments, the comments that run off into way to much get truncated! thanks
Use .attr('className') - the class attribute is called className in JavaScript since class is a reserved (yet unused) keyword. (jQuery automatically converts class to className)
And since empty alerts won't show up that's most likely the reason why you think your handlers are not firing. Actually, that's one of the reasons why console.log() is much better for debugging than alert() even though I have to admin I often prefer alert() due to it simply showing up without me having to open Firebug.
Another reason for your code not working could be a click() handler somewhere up the DOM tree which calls e.stopPropagation() and thus prevents the event from bubbling to the top where the live event's handler is listening.
Related
I have an anchor tag which created dynamically and this anchor tag has an onclick event like this:
$('#'+educationHistoryId).append("<span>"+degreeTitle+"</span>" + "<a href='javascript:void(0)' onclick='deleteEducationLevel(" + educationHistoryId + ");'>Delete</a>");
when I click on this anchor I got js error saying:
TypeError: 'click' called on an object that does not implement interface HTMLElement.
I suspect some character escaping issue but unable to resolve.
Added
generated html:
<div id="ff8081814734be020147357beda5002b"><span>A Level</span><a onclick="deleteEducationLevel(ff8081814734be020147357beda5002b);" href="#">Delete</a></div>
Try replacing that line with the following, so that the event is bound like this:
var $link = $("<a href='javascript:void(0)'>Delete</a>");
$link.on("click", function() {
deleteEducationLevel(educationHistoryId);
});
$('#'+educationHistoryId).append("<span>"+degreeTitle+"</span>").append($link);
In my (very reduced) test, this seems to work: http://jsfiddle.net/E7LRt/
Is there an actual need to do this with just one line?
I'd suggest the following solution:
var $anchor = $(document.createElement("a")).attr("href","javascript:").text("Delete").on("click",function() {
alert("clicked!");
alert("educationHistoryId: " + educationHistoryId);
});
$("body").append("<span>" + degreeTitle + "</span> ",$anchor);
This works great: Fiddle
I always try to prevent using inline eventhandlers. It's bad practise in my opinion.
Give the span a class and use event delegation.
You can then bind the click event to a existing parent(I am assuming element with id= "#"+educationHistoryId is existing when the event handler attachment takes place) and then delegate the event to the newly added link.
$("#"+educationHistoryId).on("click", <class>, function(){
deleteEducationLevel(educationHistoryId);
});
I have read some solutions to this, none of which are hassle free, so I thought maybe some modern solution now exist to remedy this. It should anyways, since the problem has been around for a while. Something in the more recent jQuery updates perhaaps?
I set my form field like this:
parent.window.document.getElementById(parent.window.imageInputField).value = '{{ path }}'+image;
and I have an onchange event like this that I would like to fire upon my field update as of above.
$('#data_1').change(function(){
img = "url(" + $('#data_1').val() + ")"
$('#slide_bg').css("backgroundImage", img );
});
UPDATE
so this code works fine:
alert( $('#'+parent.window.imageInputField, window.parent.document).val() );
while this doesn't do anything, no error or nothing
$('#'+parent.window.imageInputField, window.parent.document).change();
The change event is defined here
$('#data_1').change(function(){
alert('change event called');
img = "url(" + $('#data_1').val() + ")"
$('#slide_bg').css("backgroundImage", img );
});
and this works perfect:
<input type='button' value='Uppdatera förhandsgr.' onclick="$('#data_1').change()" />
All I want is to trigger what this button does, but by code... anyone see where I went wrong?
you need to trigger the change handler with your code. Updating a value with script will not trigger change event
parent.window.document.getElementById(parent.window.imageInputField).value = '{{ path }}'+image;
$('#data_1').change()
I have a wall posting system on a social network that I am currently building which uses jQuery and Ajax to post the message to the wall and php saves it to the DB. After the post appears on the wall there are "comment" and "like" links. I am trying to bring down a comment box when the "comment" link is clicked, however I can't seem to access the element with javascript.
Here is the code to display the wall post:
var wall_post = '<li><div class="user_activity_feed_item_user_pic"><img src="images/temp/prof_pic_temp.jpg" class="avatar"></div><div class="user_activity_feed_item_title">Tyler Bailey</div> <div class="user_activity_feed_item_content"><p class="activity_feed_text">' + textarea_content + '</p> ' + image_html + '<div class="data"><p class="name">' + sitetitle + '</p><p class="caption">' + siteurl + '</p><p class="description">' + sitedesc + '</p></div><div class="user_activity_feed_item_comment_bar"><ul> <li class="activity_feed_timestamp">July 16, 2012 2:08pm</li> <li><a id="comment" href="#">Comment</a></li><li><a id="like" href="#like_view">Like</a></li></ul></div></div></li>';
and here is the code I was trying to use to access the <a id="comment" href="#"> with:
//initiate comment box for status feeds
$(document).ready(function(){
$('#comment_wrapper').hide();
$('a#comment').click(function(){
$('#comment_wrapper').show();
});
});
Any ideas or tips on how I can get this working would be greatly appreciated!
Simply use event delegation, via on() for example:
var listEl = $('ul'); // parent of the newly added li element
listEl.on('click', 'a', function(e){
e.preventDefault();
// do something in response to a click on a link from within
// the newly-added content.
});
JS Fiddle demo.
The important thing to remember is that the element to which you bind, or assign or delegate, the on() method must be present in the DOM at the time of the binding/assignation. So work with the closest parent element of the newly-added elements that exists in the document on DOMReady or onLoad.
You can use on (falling back on delegate if you are using an older version of jQuery) to listen to all click events on a like or comment button:
var comment_wrapper = $("#comment_wrapper");
comment_wrapper.hide();
$(document).on("click", ".comment", function() {
comment_wrapper.show();
});
Don't use live unless you are using a much older version of jQuery that doesn't supply you with on or delegate. It is, if I remember correctly, the least efficient of the event listeners (aside from the bind method) for listening for an event coming from multiple elements.
Also, don't use an ID if there is going to be more than one element on the page with the ID - the ID needs to be unique across the document.
Since the links is produced dynamically use live()
$('a#comment').live("click", function(event){
//your
//actions here
});
Hello so basically what I wanted was so when you clicked a marker, it fired of some jQuery that would replace a div's contents. Works perfectly the first time, but afterwards it won't respond. Any suggestions? Thanks!
google.maps.event.addListener(marker, 'click', function() {
$('.address').replaceWith(" + '"' + $arrayOfEventNames[i] + '"' + ");
Note: This is using embedded ruby code to get the "event name" I want. So this is inside a puts statement. hence the need of the quotes.
You do not replace the content of $('.adress') but the element itself. That means that after first click it does not exist anymore so cannot be replaced.
K
I'm trying to make a notification area that will show alerts.
return this.each(function() {
jQuery('<div class="' + o['className'] + '">' + o.msg + ' +
'X' + '</div>')
.appendTo(this);
});
This just takes a message pulled from the database, and shows it to the user. If the user clicks the X then it will call dismiss() which will mark it as being read in the database.
The thing is, if the message itself contains a link to another page or external site, I also want to call dismiss() before the user leaves the page. Is there anyway to alter this javascript to take all a elements (the X and any links that would appear in the message) and change the onclick to call the function?
You can rearrange your code a bit and use .delegate(), like this:
return this.each(function() {
var id = o["id"];
jQuery('<div />', { 'class': o['className'], html: o.msg })
.append('X')
.delegate('a','click', function() { $(this).parent().remove(); dismiss(id); })
.appendTo(this);
});
This uses the new jQuery(html,props) added in jQuery 1.4 to make the creation a bit cleaner (and faster! document fragment caching!). What it's doing is instead of attaching an onclick to the X, it's listening for a click from any <a> in the div and when it bubbles, it executes the same code as it used to only on the X anchor.
The code example is a bit vague, where does this o come from? Is it global or something div-specific?
At any way, you may find jQuery.live() useful for this. Once initialized, it will be applied on all future new elements matching the selector. You only need to have some parent element which is going to contain all of those divs with the messages and the links.
$('#someDivId a').live('click', function() {
// Do your thing here as you did in `onclick` attribute.
};
Just execute it once during onload.