cyclejs loses knowledge of DOM it rendered












0















I have a small cyclejs app and everything works except this one button click... other button clicks work



Cyclejs renders the element, but seems to lose track of its reference, and I cannot get the following:



// do not get this alert
sources.DOM.elements()
.filter(c => (document.getElementById('cameraButtonId') != null))
.take(1)
.map(c => {
alert('exists')
}).addListener({})

// cannot get this either after clicking
sources.DOM.select('#cameraButtonId').events('click').map(c2 => {
alert('click')
}).addListener({})


even though the following is rendered in the browser



<button class="cameraPermissionButton" id="cameraButtonId">Enable Camera Access</button>


I have no console.log errors or exceptions of any kind










share|improve this question



























    0















    I have a small cyclejs app and everything works except this one button click... other button clicks work



    Cyclejs renders the element, but seems to lose track of its reference, and I cannot get the following:



    // do not get this alert
    sources.DOM.elements()
    .filter(c => (document.getElementById('cameraButtonId') != null))
    .take(1)
    .map(c => {
    alert('exists')
    }).addListener({})

    // cannot get this either after clicking
    sources.DOM.select('#cameraButtonId').events('click').map(c2 => {
    alert('click')
    }).addListener({})


    even though the following is rendered in the browser



    <button class="cameraPermissionButton" id="cameraButtonId">Enable Camera Access</button>


    I have no console.log errors or exceptions of any kind










    share|improve this question

























      0












      0








      0








      I have a small cyclejs app and everything works except this one button click... other button clicks work



      Cyclejs renders the element, but seems to lose track of its reference, and I cannot get the following:



      // do not get this alert
      sources.DOM.elements()
      .filter(c => (document.getElementById('cameraButtonId') != null))
      .take(1)
      .map(c => {
      alert('exists')
      }).addListener({})

      // cannot get this either after clicking
      sources.DOM.select('#cameraButtonId').events('click').map(c2 => {
      alert('click')
      }).addListener({})


      even though the following is rendered in the browser



      <button class="cameraPermissionButton" id="cameraButtonId">Enable Camera Access</button>


      I have no console.log errors or exceptions of any kind










      share|improve this question














      I have a small cyclejs app and everything works except this one button click... other button clicks work



      Cyclejs renders the element, but seems to lose track of its reference, and I cannot get the following:



      // do not get this alert
      sources.DOM.elements()
      .filter(c => (document.getElementById('cameraButtonId') != null))
      .take(1)
      .map(c => {
      alert('exists')
      }).addListener({})

      // cannot get this either after clicking
      sources.DOM.select('#cameraButtonId').events('click').map(c2 => {
      alert('click')
      }).addListener({})


      even though the following is rendered in the browser



      <button class="cameraPermissionButton" id="cameraButtonId">Enable Camera Access</button>


      I have no console.log errors or exceptions of any kind







      cyclejs






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 15 '18 at 16:14









      bluepoisondartfrogbluepoisondartfrog

      5,4751778143




      5,4751778143
























          1 Answer
          1






          active

          oldest

          votes


















          0














          It doesn't lose the track of elements' status.



          You should use the selector provided by DOMSource (as you are doing already in the code below your comment // cannot get this either after clicking) instead of using a document selector within filter, i.e., .filter(c => (document.getElementById('cameraButtonId') != null)).



          For example,



          -sources.DOM.elements()
          - .filter(c => (document.getElementById('cameraButtonId') != null))
          +sources.DOM.select('#cameraButtonId').element()
          .take(1)
          .map(c => {
          alert('exists')
          }).addListener({})





          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53323593%2fcyclejs-loses-knowledge-of-dom-it-rendered%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            It doesn't lose the track of elements' status.



            You should use the selector provided by DOMSource (as you are doing already in the code below your comment // cannot get this either after clicking) instead of using a document selector within filter, i.e., .filter(c => (document.getElementById('cameraButtonId') != null)).



            For example,



            -sources.DOM.elements()
            - .filter(c => (document.getElementById('cameraButtonId') != null))
            +sources.DOM.select('#cameraButtonId').element()
            .take(1)
            .map(c => {
            alert('exists')
            }).addListener({})





            share|improve this answer




























              0














              It doesn't lose the track of elements' status.



              You should use the selector provided by DOMSource (as you are doing already in the code below your comment // cannot get this either after clicking) instead of using a document selector within filter, i.e., .filter(c => (document.getElementById('cameraButtonId') != null)).



              For example,



              -sources.DOM.elements()
              - .filter(c => (document.getElementById('cameraButtonId') != null))
              +sources.DOM.select('#cameraButtonId').element()
              .take(1)
              .map(c => {
              alert('exists')
              }).addListener({})





              share|improve this answer


























                0












                0








                0







                It doesn't lose the track of elements' status.



                You should use the selector provided by DOMSource (as you are doing already in the code below your comment // cannot get this either after clicking) instead of using a document selector within filter, i.e., .filter(c => (document.getElementById('cameraButtonId') != null)).



                For example,



                -sources.DOM.elements()
                - .filter(c => (document.getElementById('cameraButtonId') != null))
                +sources.DOM.select('#cameraButtonId').element()
                .take(1)
                .map(c => {
                alert('exists')
                }).addListener({})





                share|improve this answer













                It doesn't lose the track of elements' status.



                You should use the selector provided by DOMSource (as you are doing already in the code below your comment // cannot get this either after clicking) instead of using a document selector within filter, i.e., .filter(c => (document.getElementById('cameraButtonId') != null)).



                For example,



                -sources.DOM.elements()
                - .filter(c => (document.getElementById('cameraButtonId') != null))
                +sources.DOM.select('#cameraButtonId').element()
                .take(1)
                .map(c => {
                alert('exists')
                }).addListener({})






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jan 11 at 19:39









                Michael Jae-Yoon ChungMichael Jae-Yoon Chung

                554




                554
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53323593%2fcyclejs-loses-knowledge-of-dom-it-rendered%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Florida Star v. B. J. F.

                    Danny Elfman

                    Lugert, Oklahoma