jQuery: How do I make an ajax call to backend and not submit form on button click?
<p>I have a jsfiddle here: <a href="http://jsfiddle.net/rDe9V/" rel="nofollow">http://jsfiddle.net/rDe9V/</a>   </p>

<p><strong>Steps to reproduce :</strong></p>

<ol>
<li>Enter in textbox  </li>
<li>Click "Add to playlist" and add some text in textbox  </li>
<li>Click "New"  </li>
</ol>

<p>The alert box doesn't seem to work. The relevant jQuery function is here   </p>

<pre><code>$(function() {
    $('form input[type="text"]').live('keyup', function() {
        var val = $.trim(this.value);
        $('form .create-playlist-button').prop('disabled', val.length == 0)
    });
    $('form .create-playlist-button').click(function(e) {
        var title = $(e.target).closest('.video-detail').find('.title').text();
        alert(title);
    });
});
</code></pre>

<p>Please help in understanding why this is not working.   </p>

<hr>

<p><strong>UPDATE</strong></p>

<p>SO doesn't allows to ask more that 6 question/day. so I am updating here   </p>

<p>I made the change to fiddle, its here now -- <a href="http://jsfiddle.net/rDe9V/2/" rel="nofollow">http://jsfiddle.net/rDe9V/2/</a></p>

<pre><code>   $('form input[type="text"]').live('keyup', function() {
        var val = $.trim(this.value);
        $('form .create-playlist-button').prop('disabled', val.length == 0).click(function(e){
            var title = $(e.target).closest('.video-detail').find('.title').text();
            alert(title);
        });
    }); 
</code></pre>

<p><strong>Needed</strong>    </p>

<ul>
<li>On button click, should not POST form  </li>
</ul>

<hr>
