Question

I have a web page with a div ID=”colorRecord” with a button in it. This button when clicked uses jQuery ajax to add a new div inside the colorRecord div. This can be done many times.

<form class="admin">
  <fieldset>
    <legend>Colours</legend>
            <div id="colorRecord"><div class="color-row"><label>Color:</label><input value="" name="color" class="std-text" type="text"><input name="recordColor" value="Save" onclick="recordNewColor();return false;" type="submit"></div></div>
    <input onclick="createNewColorRow(3);return false;" value="New Color" type="button">
  </fieldset>

</form>

Each new div has an input and an input button immediately after it. When the input button is clicked a function is called to grab the value of the input field to the left of the button. I thought:

$(this).prev().val() would have achieved my result but I am getting only undefined:

function recordNewColor() {
  console.log('Record Color');
  var thiscolor =  $(this).prev().val();
  console.log(thiscolor)
}

Any help would be appreciated:

Answer 1

You should not be binding using the onclick property in the HTML. Use jQuery instead, and using delegate() will allow you to automatically bind to the new elements.

$(document).ready(function () {
  $('#colorRecord').delegate('input[name=recordColor]', 'click', function () {
    console.log('Record Color');
    var thiscolor =  $(this).prev().val();
    console.log(thiscolor)
  });
});