Using element.on(:click) {<code>} seems to accumulate "on(:click)" events? about opal-jquery HOT 9 CLOSED

how many times is "Selected Page: #{id}" printed in the console?

from opal-jquery.

Once for every time I click a Page item in the list:

LOG:

Selected Page: 88
Selected Page: 4
Selected Page: 2
< here I click the button >
Editing page: 88!
Editing page: 4!
Editing page: 2!

from opal-jquery.

ok, try checking the size of @page_edit_btn with something like:

puts @page_edit_btn.size

if it's more than one, you may need to adjust your selector

from opal-jquery.

I put the code at the end of the "select_page" method:

puts "Page edit button size: #{@page_edit_btn.size}"

LOG:
Selected Page: 88
Page edit button size: 1
Selected Page: 4
Page edit button size: 1
Selected Page: 6
Page edit button size: 1
Selected Page: 7
Page edit button size: 1
< button pressed here >
Editing page: 88!
Editing page: 4!
Editing page: 6!
Editing page: 7!

from opal-jquery.

you mean there's only one button in the html?

maybe would be good to post the HTML as well

from opal-jquery.

Not actually a button, but an 'a' element, styled as a button using the Materialize framework.

From the body:

...
<div class="section">
  <script src="/js/build.js">
  </script>
  <div class="row">
    <div class="col l3">
      <h4 class="thin" id="pageheader">Pages (8)</h4>
      <a class="btn-flat waves-effect waves-green" id="page-new-btn">New</a>
      <a class="btn-flat waves-effect waves-blue" id="page-edit-btn">Edit</a>
      <a class="btn-flat waves-effect waves-red disabled" id="page-delete-btn">Delete</a>
      <div class="pagewindow" id="pagelist" style="height:80%">
        <div class="pagewindowitem" id="88">Admin module</div>
        <div class="pagewindowitem" id="4">Arrests</div>
        <div class="pagewindowitem" id="2">Dashboard</div>
        <div class="pagewindowitem" id="6">History</div>
        <div class="pagewindowitem" id="1">Login</div>
        <div class="pagewindowitem" id="7">Reports</div>
        <div class="pagewindowitem" id="5">Tasks</div>
        <div class="pagewindowitem" id="3">User Account</div>
      </div>
    </div>
...

So just one "button" used to edit the selcted Page item.

from opal-jquery.

I can also click the same item X amount times, which results in X lines of "Editing Page: " in the log.

from opal-jquery.

I assume the "button" is this: <a class="btn-flat waves-effect waves-blue disabled" id="page-edit-btn">Edit</a>. If that's the case it's just how jQuery works, it will append an event each time you call .on on the event, it won't replace the old event.

A solution could be to keep track of the previous event and offload it before setting the new event.

Something like this should work:

  puts "Selected Page: #{id}"
  @page_edit_btn.off @current_event if @current_event
  @page_edit_btn.remove_class "disabled"
  @current_event = @page_edit_btn.on(:click) { edit_page( id ) }

from opal-jquery.

@page_edit_btn.off(:click)

This did the trick, thanks! Guess I need to brush up on my JQuery :-)

from opal-jquery.