Question

将10月CMS用于项目，我尝试在后端转发器字段中添加javascript事件。但似乎动态添加的输入字段由转发器无法通过javascript查看，而它与其他输入字段同时使用

我的剧本如下：

<script>
  $('input').on('keypress', function(e){
      // only numbers
      if ( charCode < 48 || charCode > 57 ) {
          return false;
      }
      return true;
  });
</script>

你有什么想法让它有效吗？

提前感谢＆amp;问候，帕特里克

Answer 1

你说： -
似乎动态添加的输入字段由转发器无法通过javascript看到它与其他输入字段相同的表单

这是一个正确的行为，因为在加载页面时已经完成了事件绑定，并且之后创建了新元素，因此事件不会绑定到这些元素上。

您必须使用称为事件委派的技术。喜欢：

  $(document).on('keypress', 'input', function(e){
      // the code 
  });

在此代码中，您可以将$(document)更改为与任何div, form etc.最近的静态父级。

$('form').on('keypress', 'input', function(){
   // code here
});

所以，语法是：

$(staticParent).on(event, selector, callback);

staticParent 是加载页面时作为父元素的元素。它不应该是动态创建的父级。

Answer 2

10月10日发生了一场事件＆＃34;渲染＆＃34;在$ .request或其他方法添加新元素后的页面上。

所以，你会好好听听：

$(window).on('render', function() {
    $('input').on('keypress', function(e){
    }
});

唯一的问题是，事情会变得越来越重要＆＃34;按键。

为此，十月建议使用基础框架模式。这样，事件侦听器只会被绑定一次，如果页面上已存在元素，则不会加倍。

https://octobercms.com/docs/ui/foundation

＆＃13;

+function ($) { "use strict";
    var Base = $.oc.foundation.base,
        BaseProto = Base.prototype

    var SomeDisposableControl = function (element, options) {
        this.$el = $(element)
        this.options = options || {}

        $.oc.foundation.controlUtils.markDisposable(element)
        Base.call(this)
        this.init()
    }

    SomeDisposableControl.prototype = Object.create(BaseProto)
    SomeDisposableControl.prototype.constructor = SomeDisposableControl

    SomeDisposableControl.prototype.init = function() {
        this.$el.on('click', this.proxy(this.onClick))
        this.$el.one('dispose-control', this.proxy(this.dispose))
    }

    SomeDisposableControl.prototype.dispose = function() {
        this.$el.off('click', this.proxy(this.onClick))
        this.$el.off('dispose-control', this.proxy(this.dispose))
        this.$el.removeData('oc.someDisposableControl')

        this.$el = null

        // In some cases options could contain callbacks, 
        // so it's better to clean them up too.
        this.options = null

        BaseProto.dispose.call(this)
    }

    SomeDisposableControl.DEFAULTS = {
        someParam: null
    }

    // PLUGIN DEFINITION
    // ============================

    var old = $.fn.someDisposableControl

    $.fn.someDisposableControl = function (option) {
        var args = Array.prototype.slice.call(arguments, 1), items, result

        items = this.each(function () {
            var $this   = $(this)
            var data    = $this.data('oc.someDisposableControl')
            var options = $.extend({}, SomeDisposableControl.DEFAULTS, $this.data(), typeof option == 'object' && option)
            if (!data) $this.data('oc.someDisposableControl', (data = new SomeDisposableControl(this, options)))
            if (typeof option == 'string') result = data[option].apply(data, args)
            if (typeof result != 'undefined') return false
        })

        return result ? result : items
    }

    $.fn.someDisposableControl.Constructor = SomeDisposableControl

    $.fn.someDisposableControl.noConflict = function () {
        $.fn.someDisposableControl = old
        return this
    }

    // Add this only if required
    $(document).render(function (){
        $('[data-some-disposable-control]').someDisposableControl()
    })

}(window.jQuery);

＆＃13;

我建议阅读以上链接，因为它解释了很多陷阱等等。以及为什么清理它很重要。

就个人而言，我在10月份的基础上进行了扩展，以便进行清理工作。并且更容易管理变量。

https://github.com/tschallacka/october-foundation/blob/master/src/october-foundation-base.js

它的作用基本上是确保函数自动解除绑定，在通过jquery命令从dom中删除元素时清除变量，并在“渲染”时自动绑定到标记元素。事件被解雇了。

我的脚本会变成：

// ..... foundation code

    Application.prototype.handlers = function(type) {
        this.bind('keypress',this.$el, this.keypressHandler);
    };

    Application.prototype.init = function() {
        /**
         * example;
         */
        this.alloc('foobar',42);
        console.log(this.foobar);
    }

    Application.prototype.keypressHandler = function(e) {
        if(!e.defaultPrevented) {
            // only numbers
            if ( charCode < 48 || charCode > 57 ) {
                e.preventDefault();
                return false;
            }
            return true;
        }
    }

//  foundation code ....

10月CMS javascript事件在后端转发器字段中

2 个答案: