Magento 2 : knockout data-bind:click not working












0















I added phtml file using ajax response. There are two buttons available in that phtml file.



Buttons.phtml :



<div id="rh-buttons-temp" class="actions" data-bind="scope:'rh-buttons'">
<!-- ko template: getTemplate() --><!-- /ko -->
<button type="submit" title="Select" class="action primary" id="rh-select-btn" data-bind="click:addCustomOptions()">
<span>Select</span>
</button>
<button type="button" title="Cancel" class="action" id="rh-cancel-btn" data-bind="click:addCustomOptions()">
<span>Cancel</span>
</button>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"rh-buttons": {
"component": "RH_Custom/js/knock"
}
}
}
}
}
</script>
</div>


MainFile.phtml :



<div id="rh-ko-example" data-bind="scope:'rh-ko-scope'">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"rh-ko-scope": {
"component": "RH_Custom/js/kotemplate",
"template" : "RH_Custom/kotemplate"
}
}
}
}
}
</script>
<div style="display:none" class="product details product-item-details">
<div class='custom'>
</div>
</div>
</div>


This Buttons.phtml file added in <div class='custom'></div> using ajax response.



Now, when click on Select Button then addCustomOptions() function call should be call. But, it's not working.





EDIT :



knock.js



define(
[
'jquery',
'uiComponent',
'ko',
'RH_Custom/js/kotemplate'
],
function($,Component,ko,kotemplate) {
'use strict';
return Component.extend({
initialize: function () {
alert("knock call");
self = this;
this._super();
// kotemplate.addCustomOptions();
},
addCustomOptions : function()
{
console.log('knock custom options');
}
});
});


alert call successfully on above file. But, kotemplate.addCustomOptions() is not working. It returns error :




Uncaught TypeError: kotemplate.addCustomOptions is not a function




Where I do mistake?



Please help me.



Thanks.










share|improve this question





























    0















    I added phtml file using ajax response. There are two buttons available in that phtml file.



    Buttons.phtml :



    <div id="rh-buttons-temp" class="actions" data-bind="scope:'rh-buttons'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <button type="submit" title="Select" class="action primary" id="rh-select-btn" data-bind="click:addCustomOptions()">
    <span>Select</span>
    </button>
    <button type="button" title="Cancel" class="action" id="rh-cancel-btn" data-bind="click:addCustomOptions()">
    <span>Cancel</span>
    </button>
    <script type="text/x-magento-init">
    {
    "*": {
    "Magento_Ui/js/core/app": {
    "components": {
    "rh-buttons": {
    "component": "RH_Custom/js/knock"
    }
    }
    }
    }
    }
    </script>
    </div>


    MainFile.phtml :



    <div id="rh-ko-example" data-bind="scope:'rh-ko-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
    {
    "*": {
    "Magento_Ui/js/core/app": {
    "components": {
    "rh-ko-scope": {
    "component": "RH_Custom/js/kotemplate",
    "template" : "RH_Custom/kotemplate"
    }
    }
    }
    }
    }
    </script>
    <div style="display:none" class="product details product-item-details">
    <div class='custom'>
    </div>
    </div>
    </div>


    This Buttons.phtml file added in <div class='custom'></div> using ajax response.



    Now, when click on Select Button then addCustomOptions() function call should be call. But, it's not working.





    EDIT :



    knock.js



    define(
    [
    'jquery',
    'uiComponent',
    'ko',
    'RH_Custom/js/kotemplate'
    ],
    function($,Component,ko,kotemplate) {
    'use strict';
    return Component.extend({
    initialize: function () {
    alert("knock call");
    self = this;
    this._super();
    // kotemplate.addCustomOptions();
    },
    addCustomOptions : function()
    {
    console.log('knock custom options');
    }
    });
    });


    alert call successfully on above file. But, kotemplate.addCustomOptions() is not working. It returns error :




    Uncaught TypeError: kotemplate.addCustomOptions is not a function




    Where I do mistake?



    Please help me.



    Thanks.










    share|improve this question



























      0












      0








      0








      I added phtml file using ajax response. There are two buttons available in that phtml file.



      Buttons.phtml :



      <div id="rh-buttons-temp" class="actions" data-bind="scope:'rh-buttons'">
      <!-- ko template: getTemplate() --><!-- /ko -->
      <button type="submit" title="Select" class="action primary" id="rh-select-btn" data-bind="click:addCustomOptions()">
      <span>Select</span>
      </button>
      <button type="button" title="Cancel" class="action" id="rh-cancel-btn" data-bind="click:addCustomOptions()">
      <span>Cancel</span>
      </button>
      <script type="text/x-magento-init">
      {
      "*": {
      "Magento_Ui/js/core/app": {
      "components": {
      "rh-buttons": {
      "component": "RH_Custom/js/knock"
      }
      }
      }
      }
      }
      </script>
      </div>


      MainFile.phtml :



      <div id="rh-ko-example" data-bind="scope:'rh-ko-scope'">
      <!-- ko template: getTemplate() --><!-- /ko -->
      <script type="text/x-magento-init">
      {
      "*": {
      "Magento_Ui/js/core/app": {
      "components": {
      "rh-ko-scope": {
      "component": "RH_Custom/js/kotemplate",
      "template" : "RH_Custom/kotemplate"
      }
      }
      }
      }
      }
      </script>
      <div style="display:none" class="product details product-item-details">
      <div class='custom'>
      </div>
      </div>
      </div>


      This Buttons.phtml file added in <div class='custom'></div> using ajax response.



      Now, when click on Select Button then addCustomOptions() function call should be call. But, it's not working.





      EDIT :



      knock.js



      define(
      [
      'jquery',
      'uiComponent',
      'ko',
      'RH_Custom/js/kotemplate'
      ],
      function($,Component,ko,kotemplate) {
      'use strict';
      return Component.extend({
      initialize: function () {
      alert("knock call");
      self = this;
      this._super();
      // kotemplate.addCustomOptions();
      },
      addCustomOptions : function()
      {
      console.log('knock custom options');
      }
      });
      });


      alert call successfully on above file. But, kotemplate.addCustomOptions() is not working. It returns error :




      Uncaught TypeError: kotemplate.addCustomOptions is not a function




      Where I do mistake?



      Please help me.



      Thanks.










      share|improve this question
















      I added phtml file using ajax response. There are two buttons available in that phtml file.



      Buttons.phtml :



      <div id="rh-buttons-temp" class="actions" data-bind="scope:'rh-buttons'">
      <!-- ko template: getTemplate() --><!-- /ko -->
      <button type="submit" title="Select" class="action primary" id="rh-select-btn" data-bind="click:addCustomOptions()">
      <span>Select</span>
      </button>
      <button type="button" title="Cancel" class="action" id="rh-cancel-btn" data-bind="click:addCustomOptions()">
      <span>Cancel</span>
      </button>
      <script type="text/x-magento-init">
      {
      "*": {
      "Magento_Ui/js/core/app": {
      "components": {
      "rh-buttons": {
      "component": "RH_Custom/js/knock"
      }
      }
      }
      }
      }
      </script>
      </div>


      MainFile.phtml :



      <div id="rh-ko-example" data-bind="scope:'rh-ko-scope'">
      <!-- ko template: getTemplate() --><!-- /ko -->
      <script type="text/x-magento-init">
      {
      "*": {
      "Magento_Ui/js/core/app": {
      "components": {
      "rh-ko-scope": {
      "component": "RH_Custom/js/kotemplate",
      "template" : "RH_Custom/kotemplate"
      }
      }
      }
      }
      }
      </script>
      <div style="display:none" class="product details product-item-details">
      <div class='custom'>
      </div>
      </div>
      </div>


      This Buttons.phtml file added in <div class='custom'></div> using ajax response.



      Now, when click on Select Button then addCustomOptions() function call should be call. But, it's not working.





      EDIT :



      knock.js



      define(
      [
      'jquery',
      'uiComponent',
      'ko',
      'RH_Custom/js/kotemplate'
      ],
      function($,Component,ko,kotemplate) {
      'use strict';
      return Component.extend({
      initialize: function () {
      alert("knock call");
      self = this;
      this._super();
      // kotemplate.addCustomOptions();
      },
      addCustomOptions : function()
      {
      console.log('knock custom options');
      }
      });
      });


      alert call successfully on above file. But, kotemplate.addCustomOptions() is not working. It returns error :




      Uncaught TypeError: kotemplate.addCustomOptions is not a function




      Where I do mistake?



      Please help me.



      Thanks.







      magento2 knockout






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 35 secs ago







      Rohan Hapani

















      asked 15 mins ago









      Rohan HapaniRohan Hapani

      5,97021662




      5,97021662






















          1 Answer
          1






          active

          oldest

          votes


















          0














          On Ajax Success event write the below code after adding the html to custom div.




          $('.custom').trigger('contentUpdated');






          share|improve this answer
























          • Already done. But, no any luck.

            – Rohan Hapani
            7 mins ago











          Your Answer








          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "479"
          };
          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: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          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%2fmagento.stackexchange.com%2fquestions%2f258110%2fmagento-2-knockout-data-bindclick-not-working%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














          On Ajax Success event write the below code after adding the html to custom div.




          $('.custom').trigger('contentUpdated');






          share|improve this answer
























          • Already done. But, no any luck.

            – Rohan Hapani
            7 mins ago
















          0














          On Ajax Success event write the below code after adding the html to custom div.




          $('.custom').trigger('contentUpdated');






          share|improve this answer
























          • Already done. But, no any luck.

            – Rohan Hapani
            7 mins ago














          0












          0








          0







          On Ajax Success event write the below code after adding the html to custom div.




          $('.custom').trigger('contentUpdated');






          share|improve this answer













          On Ajax Success event write the below code after adding the html to custom div.




          $('.custom').trigger('contentUpdated');







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered 10 mins ago









          Nauman m. MansuriNauman m. Mansuri

          1968




          1968













          • Already done. But, no any luck.

            – Rohan Hapani
            7 mins ago



















          • Already done. But, no any luck.

            – Rohan Hapani
            7 mins ago

















          Already done. But, no any luck.

          – Rohan Hapani
          7 mins ago





          Already done. But, no any luck.

          – Rohan Hapani
          7 mins ago


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Magento Stack Exchange!


          • 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%2fmagento.stackexchange.com%2fquestions%2f258110%2fmagento-2-knockout-data-bindclick-not-working%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

          Magento 2 controller redirect on button click in phtml file

          Polycentropodidae