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)

Answers:

Answer

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.

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

element.addEventListener ("click", ask);
Answer

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?

Answer

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

Answer

Here is a neat demonstration

(From the example:)

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

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)

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.