jQuery evitar la acción predeterminada de entrada

Question

Tengo un formulario AJAX que me gustaría evitar que preforme una acción cuando se envíe y he probado numerosos métodos y nada funciona. Mi primer método fue:

 return false;

Y luego lo intenté

event.preventDefault();

El evento es el nombre de devolución de llamada o como se llame.

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

Aquí está el html que estoy usando ahora mismo:

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

Aquí está la prueba JavaScript que configuré:

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

Ninguno de los métodos funciona, pero la parte extraña es que funcionan en diferentes cosas como botones, pero no funcionan en esta forma. ¿Me estoy perdiendo de algo? ¡Gracias!

Answer 1

Para lidiar con su problema específico (es decir, insertar forma generada dinámicamente), usar $.on(). Es mejor que no use document.body como el observador de los padres (como $.live() esencialmente lo hace) con $.on(), entonces lo siguiente sería apropiado (teniendo en cuenta su marcado real):

<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/

Answer 2

Configuré un jsfiddle:

http://jsfiddle.net/xm679/

¿Podrías ser que olvidaste envolverlo en $(document).ready(function() {} ? Si esto no resolviera el problema: dado que el violín está funcionando, necesitaríamos su contexto para ayudar más.