Dynamic methods click event is not working

Questions
1

I have implemented photo browser in my code. I’m stucked in click event which is dynamically genrated.
I have replaced both navbar and toolbar with new dynamic data.

In html

<template>

  <div id="dynamic_navbar" style="display:none">
     <div class="navbar app-bg-color">
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                <i class="icon icon-back"></i>
                <span class="ios-only">Back</span>
                </a>
            </div>
            <div class="title" style="overflow: initial">
                <span class="photo-browser-current"></span>
                <span class="photo-browser-of">of</span>
                <span class="photo-browser-total"></span>
            </div>
            <div class="title text-center">Image Slides</div>
        </div>
    </div>
  </div>

  <div class="page-content">
        <div @click="click1"> click event 1 </div>
        <div @click="click2"> click event 2 </div>


        <div class="list no-hairlines no-hairlines-between no-margin-top">
            <ul>
                <li class="grader-request-item-border">
                    <a class="item-link item-content" @click="openSlides">
                        <div class="item-media "><img data-src="../images/nature.jpg" class="lazy lazy-fade-in img-circle" /></div>
                        <div class="item-inner">
                            <div class="item-title">
                                Open Slides
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

  </div>

  <div id="dynamic_toolbar" style="display:none">
    <div class ="toolbar toolbar-bottom-md no-bg-color no-shadow" >
        <div class="toolbar-inner padding-right padding-left">
            <!--Contrast-->
            <div class="img-circle text-align-center app-bg-color" >
                <a id="contrast_btn" @click="adjustContrast" > <i class="f7-icons">circle_half</i> </a>
            </div>
            <!--Brightness-->
            <div class="img-circle text-align-center app-bg-color" >
                <a id="brightness_btn" @click="adjustBrightness" > <i class="f7-icons">eye</i> </a>
            </div>
        </div>
    </div>

  </div>

</template>


<script>
  return {
    data: function () {
      return {
        photos: [
            "../images/img1.jpg",
            "../images/img2.jpg",
            "../images/img3.jpg",
            "../images/img4.jpg"
        ]
      }
    },
    methods: {
      openSlides: function () {
        const self = this;
        self.pageSlides.open();
      },
      click1: function() {
          console.log('click 1 is working');
      },
      click2: function() {
          console.log('click 2 is working');
      },
      adjustContrast: function() {
          console.log("adjustContrast is not trigged");
      },
      adjustBrightness: function() {
          onsole.log("adjustBrightness is not trigged");
      }
    },
    on: {
      pageInit: function () {
        const self = this;
        self.pageSlides = self.$app.photoBrowser.create({
          photos: self.photos,
          type: 'page',
          renderNavbar: function() {
            var navbar = $$("#dynamic_navbar").html();
            return navbar;
          },    
          renderToolbar: function() {
              var toolbar = $$("#dynamic_toolbar").html();
              return toolbar;
          }
        });
      },
      pageBeforeRemove: function () {
        const self = this;
        self.page.destroy();
      },
    }
  };
</script>

In the above code both adjustContrast and adjustBrightness methods are not working. I mean its not triggered.

If I do in following way then its working.

$$(document).on("click", "#contrast_btn", function(){
  console.log('working Contrast');
});

$$(document).on("click", "#brightness_btn", function(){
  console.log('working Brightness');
});

Is there any other way to do access these methods instead of calling document?

Please help me.

2

And they won’t work because you are doing $$("#dynamic_navbar").html() which is returns you just a HTML string which can’t have any events or bindings. Add events on photo browser open:

self.$app.photoBrowser.create({
  photos: self.photos,
  type: 'page',
  renderNavbar: function() {
    var navbar = $$("#dynamic_navbar").html();
    return navbar;
  },    
  renderToolbar: function() {
      var toolbar = $$("#dynamic_toolbar").html();
      return toolbar;
  },
  on: {
    open(pb) {
      if (pb.eventsAssigned) return;
      pb.$el.find("#brightness_btn").on('click', function(){
        console.log('working Brightness');
      });)
      pb.$el.find("#contrast_btn").on('click', function(){
        console.log('working Contrast');
      });)
      pb.eventsAssigned = true;
    }
  }
});
1 Like