магистральное событие не срабатывает с небольшим изменением CSS - добавьте CSS float в тег img

--Решено, см. нижнюю часть OP

Единственным изменением было добавление нижеприведенного блока css для размещения тега изображения с текстом в той же строке.

Ошибка - после изменения css jquery видит событие "щелчок" на изображении (класс=usrgrp), но магистраль не получает никакого вызова функции "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 плавает изображение в порядке, выравнивая его с текстом в той же строке.

Но изменение css каким-то образом прерывает событие click.

Примечание: прежде чем прибегать к css.float, я попробовал следующий html в теге изображения.

стиль = «вертикальное выравнивание: посередине»

и не получилось почему-то.

-- Решено измененным css ниже

в теге img: style="vertical-align:middle;text-align:left;"

и на этикетке в css добавлено следующее:

отображение: встроенный блок; выравнивание текста: по левому краю;