JQuery Button Click

[gharabed]

Let me start by saying I am a complete javascript novice. I have inherited some javascript utilizing the JQuery libraries and am a bit confused on things especially when it comes to scope. I am trying to stay in the JQuery architecture of the code base but really am completely unfamiliar with JQuery.

Basically I am trying to add two TEXT fields and one BUTTON and execute a function when the button is clicked. For testing purposes, I just want an alert box to pop up with the contents of the two TEXT fields. Here is an example of the code that exists. You can see that it is using the .html method to render the html. It is creating a checkbox, two text fields, and a button (I added the text fields and button, the checkbox was already there. I tried adding a function just like the function that is there for the .click on the checkbox but the html doesn't even render when I add it.

How do I add a function that will handle the click on the "button" (gregsBtnID) I added?

function loadButtonsFields()
{
  var newDiv = document.createElement('div');
  jQuery(newDiv)
     .css('backgroundColor', '#e6e7fa')
     .css('width', '236px')
     .css('fontFamily', 'arial,helvetica,clean,sans-serif')
     .css('fontSize', '12px')
     .css('padding', 2)
     .css('borderStyle', 'solid')
     .css('borderWidth', 'thin')
     .html('<center><input type="checkbox" id="myCheckBox" name="myCheckBox" value="1"'+ (varIsEnabled ? 'checked' : '') +'> Enable Checkbox?<br> target="_blank">myTest.com</a>)</center>Text Box 1: <input type="text" name="txtBox1" size="7"/><br>Text Box 2: <input type="text" name="txtBox2" size="7" /><br><input type="button" name="gregsButton" id="gregsBtnID" width="100"  value="The Button"');		
  jQuery('div #myDiv').after(newDiv);
  jQuery('#myCheckBox').click(
     function()
     {
        varIsEnabled = this.checked;
        GM_setValue("varIsEnabled", varIsEnabled);
        GM_log("setting varIsEnabled = " + varIsEnabled);
     }
  );
}

 

[tsuji]

[1]
>How do I add a function that will handle the click on the "button" (gregsBtnID) I added?
You could do the same as what is done to the checkbox.
[tt]
//Add this just after the jQuery('#myCheckbox).click line
jQuery('#gregsBtnID').click(
function() {
alert('click handler bound to #gregsBtnID successfully');
}
);[/tt]

[1.1] Make sure the binding is successful in this construction. Some configuration may need to put the event handler binding inside $('document').ready() construction.

[2] The main anticipated trouble might come from, for whatever reason, the function might get called more than once. In that case, since id's are involved, you might end up with multiple elements with the same id. You can avoid it once and for all by wrapping the content of the function by checking a characteristic element's (say the 'gregsBtnID'). It that characteristic element already exists, do nothing. Like this.
[tt]
if(jQuery('#gregsBtnID').length==0) {
//etc etc... (your existing lines plus added lines)
}
[/tt]