0

I'm running into this problem a lot and I believe it is something to do with event binding, or the jQuery trying to change an element before it exists. I load some HTML. That is fine. Some elements change as expected, because they already existed at a higher level in the DOM. But changing something in the HTML that is loaded e.g. changing the attribute of the loaded form placeholder (using its ID) - fails.

This is the jQuery stuff:

$.get("inc/views/updateSegment.php", function (view) {
    $('#segment-body').html(view);
    $('#mode').html('Edit Mode').toggleClass('text-danger text-primary');

    $('#' + form_target_id).append('<button type="button" id="updateScore" class="btn btn-primary" onclick="segmentList()">Cancel</button>');

    $('#segment_name').attr("placeholder","Party Time");

})

And here is the HTML that is loaded:

    <p class="info">Update current Segment details</p>
<form role="form" id="updateSegment-form">
    <div class="form-group">
        <input type="text" class="form-control" name="segment_name" id="segment_name" placeholder="Title">
        <small id="segmentnameHelp" class="form-text text-muted">Update the Name</small>
    </div>
    <div class="form-group">
        <input type="time" class="form-control" name="start_time" id="start_time">
        <small id="starttimeHelp" class="form-text text-muted">Update the Start-time</small>
    </div>
</form>
Mark Slater
  • 141
  • 2
  • 9
  • Make sure you don't get duplicate ids when adding dynamic content. – Yury Tarabanko Jan 10 '18 at 06:26
  • I changed it to something completely random and unused. Still the problem. But if I add another button that then calls a function to change the attribute - it works. So I feel it is something to do with my code trying to change an attribute of something before it is loaded. – Mark Slater Jan 10 '18 at 06:28

0 Answers0