найти jquery вызывающий экземпляр источника события - PullRequest
Новая
       2

найти jquery вызывающий экземпляр источника события

0 голосов
/ 28 февраля 2020

Не знаю, верно ли название этого вопроса. В любом случае, я попробую. Вопрос: В библиотеке js я строю функцию / объекты следующим образом: 

    function demo(o) {
        var d ={
            $table:$('#'+o.tableId)
            // other parameters
        };
        $.extend(this, {
            param1: false,
            myMethod: function () {
                d.$table.on("click", "tbody td", {org: this}, function (ev) {
                    ev.data.org.tabEvent({
                        action: $(this).data("action"),
                        cell: $(this).data("cell")
                    });
                });
                return this;
            },
            tabEvent:function(ev){
                // here I can manage the data from the demo instance
            },
            init:function () {

            }
        });
    }

    var demoInstance = new demo({
        tableId: "tab1"
    });

demoInstance.init();

Моя цель - работать с одним экземпляром в любой ситуации. Итак, в «myMethod» я повесил событие «click» на таблицу, и каждое событие возвращается в исходный экземпляр с помощью переданного объекта: ev.data.org.

Это правильный стиль написания? Есть ли у вас умное решение?

1 Ответ

0 голосов
/ 28 февраля 2020

Учитывая назначение вашего кода, было бы больше посылов, чтобы создать его как плагин jQuery, который вы создаете для необходимых элементов. Попробуйте это: 

$.fn.demo = function() {
  let init = function() {
    // perform whatever initialisation actions you need here...
  }

  let tabEvent = function() {
    // here I can manage the data from the demo instance
    var $cell = $(this);
    console.log($cell.data('action'), $cell.data('cell'));
  }
  
  init();
  return this.on('click', 'tbody td', tabEvent);
}

$('table').demo();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td data-action="foo" data-cell="bar">Table 1 / Cell 1</td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td data-action="lorem" data-cell="ipsum">Table 2 / Cell 2</td>
    </tr>
  </tbody>
</table>
...