Question

I have a jsfiddle here – http://jsfiddle.net/9kKXX/20/

My jQuery function

$(function() {
    $('form input[type="text"]').live('keyup', function() {
        var val = $.trim(this.value);
        $('form .create-playlist-button').prop('disabled', val.length == 0).click(function(){
            alert('ALERT TITLE HERE');
          });
    });
});​

Requirement

• Click on dropdown -> enter text -> hit create
  I would like to select the corresponding form elements like title, views etc. This is not happening right now

• When I click on create, it keeps on alerting again and again, how can I avoid that?

I am very new to jQuery and read couple of places but did not find the solution to it

Thank you

UPDATE
————

Answer by Jeff works in fiddle, but when I put that on my code, it does nothing on click. I put the entire code sample in this fiddle – http://jsfiddle.net/rDe9V/ , please help me understand what shall have been wrong here

Answer 1

There’s a few things going on here. Here is the final fiddle.

First, You are binding the click event every time the key up event is fired. That means the alert will fire at least once for every character in the playlist title. You need to bind the click even on document ready.

$(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(){
        alert('ALERT TITLE HERE');
    });
});​

Second, You are using duplicate ids. There are many elements on the page with

<div id="video-detail">

IDs must be unique. You should change these to classes instead.

<div class="video-detail">

Third, you can access the title by traversing up the DOM tree to a common ancestor between the clicked button and the title the traverse back down to the title. Assuming you change the IDs to classes, that would look like this:

$('form .create-playlist-button').click(function(e){
    var title = $(e.target).closest('.video-detail').find('.title').text();
    alert(title);
});

You can go to my fiddle to see the final product.