CODEWITHSUNDEEP
javascriptjqueryhtmlevents
haxpanel
haxpanel

Reputation: 4678

Javascript event manipulating

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)

Upvotes: 1

Views: 150

Answers (6)

haxpanel
haxpanel

Reputation: 4678

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)

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

Here is a neat demonstration

(From the example:)

$('a').click(function(event) {
     event.preventDefault();   
    $('#edit').show(500);
});

Upvotes: 0

Imi Borbas
Imi Borbas

Reputation: 3703

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');

Upvotes: 0

mightyplow
mightyplow

Reputation: 519

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?

Upvotes: 0

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124778

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.

Upvotes: 2

RobertO
RobertO

Reputation: 2663

function ask ( e )
{
   e.preventDefault (); //prevents default browser action
   //do whatever
}

element.addEventListener ("click", ask);

Upvotes: 1

Related Questions