javascript - 主干事件不会因小的 css 更改而触发 - 将 css float 添加到 img 标签

Question

--已解决，见OP底部

唯一的变化是在下面添加了 css block ，使带有文本的图像标签 float 在同一行上。

错误 - 在 css 更改后，jquery 在图像 (class=usrgrp) 上看到“点击”事件，但 backbone 没有收到任何对“triggerEvents”函数的调用。我在调试中观察到了这一点。

-- 之前的代码工作正常

<div class="pichdr">
    <a href="#" class="usrgrp">
    <img src="../../../../../Content/images/group-sm.png"   width="40" height="40">
    </a>
<label class="parent-role"> 
    <%= name %></label>
</div>
<ul id="todo-list"></ul>

...
//In marionette composite view.. 

    events : {
          "click .usrgrp" : "roleRelation"
    },

    roleRelation : function(e) {
        console.log("RoleUsrLst.getrole CLIK"); //not appearing with new css
        vent.trigger('roleuserlist:getrole', this.model);
    }

将以下内容添加到 css，单击不再在主干中触发，即“triggerEvent()”不再在主干调试中调用，尽管 jquery 正在从 DOM 获取事件。

.usrgrp  {

    border: 1px solid black;
    margin: 5px 5px;
    float: left;

}

CSS 可以使图像 float ，使其与同一行上的文本对齐。

但是 css 更改以某种方式破坏了点击事件。

注意:在求助于 css.float 之前，我在图像标签上尝试了以下 html

style="vertical-align:middle"

由于某种原因它没有工作。

--通过更改下面的 css 解决

在 img 标签上:style="vertical-align:middle;text-align:left;"

在标签上，在 css 中，添加了以下内容:

显示:内联 block ；文本对齐:左对齐；

Answer 1

试着像这样改变你的事件:

events : {
      "click .usrgrp img" : "roleRelation"
}