Javascript event manipulating - javascript

I'm about to make an inplace editor with jquery. It works by clicking the text you want to edit and it replaces the content of it with an input. In the current case with a select tag.
It works fine except with the <a> tag... If you click on an <a> tag it confirms you what to do. You can accept edit mode or cancel it.
If you accept the edit mode, it changes the content of the <a> with a <select>. The problem comes after this point: If you click on the select the parent tag (<a>) fires up a new page load.
I tried to bind a click event on the <a> with a false return, but in this case the select wont work by mouse.
The other way to solve this I think is to bind a click event to the <select> and manipulating somehow the event object...
How to do this? Or is this a wrong approach?
UPDATE:
The base approach is invalid (select inside an a) but I found a solution: Remove the href parameter and you don't need ugly event hacking what does not even work in FF.
(similar problem and its explanation: Select tag inside hyperlink problem)

Don't change the content, change the element. Store the a element somewhere, replace it with a select, and then when you're done, replace back. This way you don't have to bother with the link firing.

function ask ( e )
{
e.preventDefault (); //prevents default browser action
//do whatever
}
element.addEventListener ("click", ask);

why do you want to manipulate the event object? can't you just leave the a-event to return false and set another eventhandler to the select-tag?

Wrapping the <select> in an <a> tag is not valid HTML. Also, hijacking the click event handler of the <a> to fire the select's one is considered an ugly hack. I would recommend you to put the <select> after the <a> in the DOM, and hide the link temporarily for the duration of the editing.
One thing I would try is to play with jQuery's DOM manipulating methods. For example:
$('#my_select').detach().insertAfter('#my_link');

Here is a neat demonstration
(From the example:)
$('a').click(function(event) {
event.preventDefault();
$('#edit').show(500);
});

The base approach is invalid (select inside an a) but I found a solution: Remove the href parameter and you don't need ugly event hacking what does not even work in FF.
(similar problem and its explanation: Select tag inside hyperlink problem)

Related

How to use click event on <a> tag

How to use click event on tag without id
Hello everybody, I have a html tag bellow:
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable fc-resizable" href="https://www.youtube.com/watch?v=XXXXX"><div class="fc-content"> <span class="fc-title">event</span></div><div class="fc-resizer fc-end-resizer"></div></a>
this html code was built automatically by jquery so I can't add id or "onlick" event on this tag.
What I want is when I click on this tag, it will open a new windows with href for me. I tried to use
$('.fc-day-grid-event).on('click, function() {
...//
});
But it's not working.
How should I do for this case? Please help.
this html code was built automatically by jquery so I can't add id or "onlick" event on this tag
If you can't control when that happens, you can still use event delegation to get involved in the click event:
$(document).on('click', '.fc-day-grid-event', function() {
...//
});
That works even if the code runs before the element exists. The code in your question only works if the element exists as of when your code runs. See the documentation for details.
As the code is generated after the page rendering, you should use a delegated event handler:
$('body').on('click','.fc-day-grid-event', function() {
//...
});
The original code is missing apostrophes after the class name and after the 'click'.
This should work:
> $('.fc-day-grid-event').on('click', function() {
...//
});
However you might consider to check, if there are other dom elements with that class. An ID is much safer. A workaround could be to use multiple classes in the jQuery selection by selecting the element(s), that matches them all:
$('.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable.fc-resizable')
but this might still be not sufficient, because these framework-classes seem to be dynamically created and maybe deleted and the selection might be too wide or too narow. You could try to select the a tag with parent/child relations, where you know, that you are getting the right element and you could even use the innerHTML of the elements. Alternatively you could iterate through a JQuery-Selection and check for certain attributes.
I'm not sure, if you want to change the target of the link or the target window of the link. Opening the target of a link in a new window works with standard html by using the target attribute
<a href='bla' target='_blank'>bla ...
If you use Javascript for manipulating the target adress of a link outside of the href, the code might get hard to maintain in most contexts and the user might get confused, because he get's to page, he didn't expect. I would try to manipulate the Javascript, that is creating the a tag or if that's really impossible, i would manipulate the existing a tag according to my needs and change the attributes like this, if you want to use jQuery:
For the target address of the link:
$('.fc-day-grid-event').attr("href", "www.newhrefvalue.com")
Or for opening the link in a new tab:
$('.fc-day-grid-event').attr("target", "_blank")
Then you don't need to prevent or emit events or create event listeners.
<a onclick="doStuff(this)">Click Me</a>

onclick in tooltip not firing

Please see the link:
http://www.stilgiyin.com/share.php?sshrsrc=http%3A%2F%2Fimages.boyner.com.tr%2FCmsFiles%2FImages%2FProductImages%2FOriginal%2F654000%2F1_1262674.jpg
If you click on the jacket, you will see an alert "here". Looking at the page source, you'll see the onclick that is responsible for this alert.
If you hover over the jacket, you will see a tooltip. I used the jquery tiptip plugin for this tooltip. The plugin requires you to put the tooltip's content within a title attribute.
I'm trying to get an onclick event to fire when the user clicks on the large pink button inside the tooltip. However, it doesn't seem to be working, because the alert I set "intooltip" isn't popping up.
The code for the onclick is:
onclick="alert('intooltip'); clickstatistictit(this.rel); _gaq.push(['_trackEvent', 'outgoing', 'boyner.com.tr', '']); trackConv('995622692', 'JMHBCOzUgAQQpP7f2gM');"
I don't know if the problem is that I have double quotes around intooltip instead of single quotes. However, if I use single quotes, this closes the tooltip content, which begins with title='
Or maybe the issue is something completely different. Any ideas?
Thanks,
Andrew
You should escape the double quotes inside your title attribute, otherwise you will get syntax errors in the onclick handler.
It might also be better to put your event handeling code inside a separate function in your header. You can then use just the function name inside the title attribute instead of the list of functions calls you are using now.
Like you said, the reason is that you use double quotes inside other double quotes. When you check that pink button in firebug, the resulting code says:
onclick="alert("
so it's not interpreted correctly.
The tiptip jQuery plugin doesn't create a new child for every element with a tooltip. Instead it uses a general container and moves it accordingly, thus the tooltip is not a descendant of your element. Thereby the click event won't bubble to your elements onclick handler.
Note that tiptip isn't meant for such kind of tooltips. After all tiptip was originally meant for text tooltips.

jQuery, <div> loading itself using generated links that are clickable more than once

I got following problem: I generate a div with "jQuery-Load" links. Theese links inside the div should reload the same div with different parameters. I found a working solution, which generates theese links, which are clickable and... ...trigger the chosen event once. So clicking the same link inside the generated div, after it has been regenerated, doesnt work anymore. Tried a lot of things...
It looks like that now:
click
<div id="aaa0"> I'm the div - level1! </div>
div gets filled - beautyful.
It now contains this: (actually its generated what is why wrote [time] wich is time(); generated in php. as a changing parameter
[...] Link inside Updated Div [...]
when i click the link inside the div it works. when i click it again, it wont...
I want to generate a nice 'click deeper inside the data'-thing, which would be amazing getting this thing work and is the reason why everything must be as best as possible inside the "onclick" event :|
Sorry btw. for the a bit confusing post-style, its a confusing topic, and im not native speaking :)
Thanks for any help or hint in advance,
Harry
Maybe you're missing the concepts between bind and live. In bind, jQuery scans the document and attach a function direct to the element. In live, jQuery attach the function to the document, along with the event and the element as parameters. Once a event bubbles, jQuery check the event and the element, and if it match, then a function executes.
After the first run, the dom has changed, and its gonna work using live.
something like that should work:
click
<div id="aaa0"> I'm the div - level1! </div>
<script>
$('a').live('click', function (e) {
e.preventDefault();
var id = this.id;
$(this).next('div').load('getdetails.php?fNumber=36&env=fun&id=' + id);
});
</script>
basically, what is done is a generic rule, which gives all tags the same behavior. (load next div content). ".live()" is used so that loaded tags work (check the jquery documentation for .live(), or event delegation in general).
I'm not certain about the preventDefault stuff. You might want to use somehting else than tag for the link.
click
made the day :) I don't know exactly why, but maybe its possible preventDefault made the bind and live thing for me. Its working fine, so ...
thanks for the hints! :D

How to make function work after append

For example i'm using append, and for example i'm appendig button in to a div, and i have function $('button_id').click(... etc to work affter i append the div, how can i do that.I mean i get no errors, but the function is not starting, it's because i append and then i want to use the function but how to do that, i tryed with delegate, but same thing.I tryed with function in the button tag , onmouseover and then the function thing, but nothing it gives me function not found.What is the solution ?
I have two events, one event is click event that appends button, the other event is click event that does something if the button that was appended is clicked, but that second event is not working ?
Try using :
$(elem).live(...)
It will bind event for now and in the future.
Firstly, it always helps if you show us the exact source code. $('button_id') is the incorrect selector to start with, try something more along the lines of $('#button_id') as your selector. Also, are you appending dynamic content? Anyways, I've always used the delegate() function quite successfully, but have you tried using the live() function? Also, one more thing to make sure of is that you have the newest version of jQuery as your source.
As was stated as well, you can not have duplicate ids, if you want to have a pointer, use class, instead of id="some_id" use class="appended". To select those using jQuery, use the selector like this $('.appended').
Try something like this it will work as per your expectations.
$("#button_id").click(function(){
//On click code goes here
}).appendTo($("#div_id"));
It's difficult to determine the problem you're having without seeing your code, but delegate (or live) should be perfect for what you're trying to do:
$("body").delegate("#b", "click", function() {
alert("ok");
});
$("#example").append('<input type="button" id="b" value="Click" />');
The click handler above will fire when an element with id="b" is clicked, whether or not that element happens to be in the DOM right now or not.
However, as others have noted, it's important to remember that IDs need to be unique within a document, so by the sounds of it you may be better of using classes instead.
You can see an example of the above code running here.

Span element change event

My question is:
Does have a span element the inner html change event?
I think about I have a span and when the span inner html is changing it will throw an event that I can reach?
I would like to use Jquery to bind to this event of span.
l.
From the jQuery documentation:
The change event is sent to an element
when its value changes. This event is
limited to <input> elements,
<textarea> boxes and <select>
elements.
At the moment, such events are not supported by browsers like IE, but what you are looking for is DOM events. See https://developer.mozilla.org/en/DOM_Events for more information.
No. As a rule of thumb, if something internal to a script changes something, it will not trigger an event.
Nothing external to a script can edit the innerHTML of a span (unless, perhaps, it is contentEditable) so there is no event.
Why not handle it when you make the change?
function updateHTML(el,newhtml,callback){
el.innerHTML=newhtml;
if(typeof callback=='function')callback(el);
}

Categories

Resources