javascript - 在子类中触发点击

问题描述

当我单击父级（类）"update-message-button"的空白区域时，甚至单击其对应的（类）时，我一直在尝试寻找使用 jquery 触发下拉（类）的方法。我附上了我的 jquery 代码，但下拉菜单没有被触发。<td>"message-row"<td>"message-type-row"

提前致谢

$(".message-row").on("click", function () {
    $(".update-message-button").trigger("click");
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
     <td class="message-row" scope="row">
       <div class="dropdown dropleft">
         <a class="update-message-button" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {{this.message}}
         </a>
         <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item update-message-id" href="#" data-toggle="modal" data-target="#exampleModal" data-id="{{this._id}}">Update</a>
            <a class="dropdown-item" href="#">Remove</a>
         </div>
       </div>
    </td>
    <td class="message-type-row">
        {{this.messageType}}
    </td>
</tr>

标签： javascripthtmljquerycssbootstrap-4

解决方案

它说你是新人......所以欢迎来到 Stack！

如果您在工作场所不使用 JavaScript 框架......jQuery 是一个非常好的方法

在查看您的 HTML 和解释时……您要完成的工作并不是真的“那么清楚”。而且，如果我是正确的，我觉得你的方法有一些问题。也就是说......我将“尝试”保持在我认为您所要求的范围内（并尽量不要改变太多）。

它“看起来”像你想要......

当“单击”父级时显示“下拉列表”（排序）
选择时管理“更新和删除”选项

在分析您提供的 HTML 时……您可能还想通知用户选择的其他组件（所以我也添加了这一点）。

旁注：

我为你“压缩”了 CSS 和 HTML
消息...是您的“记录等级”
MessagePublisher...是您的“HTML 模板类”
SubscriptionController ...是“订阅者类”（这是可选的）
记录器...记录到控制台（方便...但也是可选的）

干杯!

    var logger = (function () {
        return {
            log: function () {
                if (console) {
                    var args = Array.prototype.slice.call(arguments);
                    console.log.apply(console, args);
                }
            }
        }
    })();

    function Message(id, messageType) {
        this.id = id;
        this.messageType = messageType;
    }

    function MessagePublisher(record) {

        var _record = record,
            _$message = null,
            _$messageOptions = null,
            _$messageType = null,
            _$dropdown = null,
            _$updater,
            _$destroyer;

        return {
            dataBind: function (ele) {

                // Elements
                _$message = $(ele);
                _$messageOptions = $('.message-options', _$message);
                _$messageType = $('.message-type', _$message);
                _$dropdown = $('.dropdown', _$messageOptions);
                _$updater = $('.update-message', _$dropdown);
                _$destroyer = $('.destroy-message', _$dropdown);

                // Values
                _$messageType.text(_record.messageType);
                _$updater.attr('data-id', _record.id)
                _$destroyer.attr('data-id', _record.id)

                // Events
                _$messageOptions.on('click', this.on.click.messageOptions);
                _$destroyer.on('click', { publisher: this }, this.on.click.removeMessage);
                _$updater.on('click', { publisher: this }, this.on.click.updateMessage);
            },
            on: {
                click: {
                    messageOptions: function (e) {

                        e.preventDefault();
                        if (!_$dropdown.is(':visible')) {
                            _$dropdown.show();
                        }
                    },
                    removeMessage: function (e) {
                        e.preventDefault();
                        $(e.data.publisher).trigger('destroy::record', [_record])
                    },
                    updateMessage: function (e) {
                        e.preventDefault();
                        $(e.data.publisher).trigger('update::record', [_record])
                    }
                }
            }
        };
    }

    function SubscriptionController() {
        return {
            on: {
                destroy: function (e, record) {

                    logger.log('DESTROY', [record]);
                },
                update: function (e, record) {

                    logger.log('UPDATE', [record]);
                }
            }
        };
    }

    $(document).ready(function () {

        // Subscriber
        window.subscriber = new SubscriptionController();

        // Publishers
        var $messages = $('.message');
        $.each($messages, function (index, ele) {

            var id = index+1;
            var record = new Message(id, 'Awesome Message Type');
            var controller = new MessagePublisher(record);

            controller.dataBind(ele);

            // Apply Subscriptions
            $(controller).on('destroy::record', window.subscriber.on.destroy);
            $(controller).on('update::record', window.subscriber.on.update);
        });
    });

table { width: 600px; }
table tbody tr.message { }
table tbody tr.message td { border: 1px solid #e3e2e1; padding: 5px; }
table tbody tr.message td { width: 50%; }

.message { }
.message .message-options { cursor: pointer; }
.message .message-options .dropdown { display: none; }
.message .message-options .dropdown a { display: block; }
.message .message-options .dropdown .sub-menu { }
.message .message-options .dropdown .sub-menu .menu-item { cursor: pointer; }

.message .message-type { }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr class="message">
            <td valign="top" class="message-options">

                <div class="dropdown">

                    <a class="dropdown-message">Please Choose an Option</a>

                    <div class="sub-menu">
                        <a href="#" class="menu-item update-message">Update</a>
                        <a href="#" class="menu-item destroy-message">Remove</a>
                    </div>
                </div>

            </td>
            <td valign="top" class="message-type">
            </td>
        </tr>
    </tbody>
</table>

javascript - 在子类中触发点击

问题描述

解决方案

推荐阅读