Question

I have an ajax form I would like to prevent from preforming an action when submitted and have tried numerous methods and nothing works. My first method was:

 return false;

and then I tried

event.preventDefault();

event being the callback name or whatever you call it.

function(event) {
    event.preventDefault();
};

Heres the HTML I am using right now:

<form class="main_search" method="POST" action="ajaxsearch.php">
    <input type="text" class="editable" placeholder="Search">
</form>

Heres the test javascript I set up:

$('.main_search').submit(function(event) {
    event.preventDefault(console.log(event)); //Log the event if captured
});

Neither method works but the weird part is that they work on different things like buttons but they don’t work on this one form. Am I missing something here? Thanks!

Answer 1

To deal with your specific problem (ie, inserting dynamically generated form), use $.on(). You’re better off not using document.body as the parent observer (as $.live() essentially does) with $.on(), so the following would be appropriate (considering your actual markup):

<div id="searches">
    <form class="main_search" method="POST" action="ajaxsearch.php">
        <input type="text" class="editable" placeholder="Search">
    </form>
</div>

var $main_search = $('.main_search'),
    $searches = $('#searches');

$searches.on('submit', '.main_search', function(event) {
    event.preventDefault();
    console.log(event); //Log the event if captured
});

setInterval(function(){
    $searches.append($main_search.clone());
}, 5000);

http://jsfiddle.net/5TVGn/2/