1

If I wire up a click event for a button that is part of a custom header or footer, the event never fires. I have to register the onclick event directly in the html.

<footer id='currentchatfooter'>
    <div id="footerdiv">
        <input type='button' id="cannedRespBtn" class='icon stack footerbutton' value='responses' />

        <input type="text" id="segment" class="jq-ui-forms seginput" />

        <a class='icon check'  id="sendBtn" onclick='document.smTouch.SendSegment($("#segment").val())'>send</a>
    </div>
</footer>

notice, the sendBtn anchor. I used to be able fire this event by declaring:

$("sendBtn").on('click', function(){instance.SendSegment($("#segment").val());});

It seems any elements within a header, footer, or modal do not get attached, or removed. I KNOW i am missing something

Mike_G
  • 16,237
  • 14
  • 70
  • 101
  • 1
    You are missing the "#" in the selector- should be$("#sendBtn"). Also, it's better to use delegation on the header/footers. eg $("#navbar").on("click","#sendBtn",function(){}) –  Feb 06 '13 at 18:51
  • Thank you. The missing "#" was typo in the question, and not code. Just wondering, but why does your version work, but I have tried "$("#navbar #sendBtn").on...." and it doesnt work? – Mike_G Feb 06 '13 at 19:14
  • 2
    Because elements are cloned (element.cloneNode) and then added to the footer. This does not copy events over. So your binding would only work at start if your footer never changes. Event delegation looks for a click on "#navbar" then queries to find "#sendBtn" - which could or could not be there. –  Feb 06 '13 at 19:43

0 Answers0