可点击的行不影响按钮

Question

.html文件是

    <tbody>
        {% for row in results %}
        <tr class="{% cycle 'row1' 'row2' %} clickable-row" data-href="{% url "perception:detail"  pk=row.object.pk %}">
            {% for item in row.cols %}
            {{ item }}
            {% endfor %}
            {% if row_actions_template %}
            <td class="row-actions">{% include row_actions_template with object=row.object %}</td>
            {% endif %}
        </tr>
        {% endfor %}
    </tbody>

.js文件是

$(function(e){
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

那个视图.py文件是

class PerceptionIndexView(StaffRestrictedMixin, FrontendListView):
    page_title = _('Perception')
    model = Perception
    template_name = 'loanwolf/perception/index.html'
    pjax_template_name = 'loanwolf/perception/index.pjax.html'
    # row_actions_template_name = 'loanwolf/perception/list-actions.inc.html'
    url_namespace = 'perception'

def active(self, obj):
    if obj.is_active:
        return icon(obj.get_icon(), css_class='green-text', tooltip=_('Active'))
    else:
        return icon(obj.get_icon(), css_class='red-text', tooltip=_('Inactive'))

def notes_count(self, obj):
    return obj.notes.count()
notes_count_label = _('Notes')

def get_change_url(self, obj):
    return obj.get_absolute_url()

class Meta:
    ordering = ('-created', '-modified')
    sortable = ('start_date', 'end_date', 'created', 'state', 'modified')
    list_filter = ('state', 'is_active', customer, error)
    list_display = (
        '__unicode__', 'context_menu', 'state', 'start_date', 'end_date', 'current_balance',
        'operation_error', 'modified', 'created', 'notes_count', 'active'
    )

models.py文件的部分是

@python_2_unicode_compatible
class Perception(xwf_models.WorkflowEnabled, TimeStampedModel):
    loan = models.ForeignKey('loans.Loan')
    state = xwf_models.StateField(PerceptionWorkflow)
    start_date = models.DateField(_('Start date'))
    end_date = models.DateField(_('End date'), blank=True, null=True)

    current_balance = models.DecimalField(_('Current balance'),
                        default=0, decimal_places=2, max_digits=11)
    operation_error = models.SmallIntegerField(_('Operation error'), default=0)
    notes = GenericRelation(Note)



def get_absolute_url(self):
    return reverse('perception:detail', kwargs={'pk': self.pk})

def get_icon(self):
    if self.is_active:
        return 'check_circle'
    else:
        return 'remove_circle'

def save(self, *args, **kwargs):
    rs = super(Perception, self).save(*args, **kwargs)
    return rs

#Property
def __str__(self):
    return six.text_type(_('Perception #%07d') % self.pk)

@property
def firstname(self):
    first_name = self.loan.request.customer.user.first_name
    return first_name

@property
def lastname(self):
    last_name = self.loan.request.customer.user.last_name
    return last_name

@property
def context_menu(self):
    tpl = 'perception/context-menu.inc.html'
    return mark_safe(render_to_string(tpl, {
        'user': self.loan.request.customer.user,
        'customer': self.loan.request.customer,
    }))

perception/context-menu.inc.html文件如下所示

{% load i18n %}
<div class="customer-context-menu closed {% if customer.gender == 0 %}male{% else %}female{% endif %}">
    <b class="unselectable">
        {{ customer.icon }}
        {{ user.get_full_name }}
    </b>
    <ul>
        <li class="tip"></li>
        <li><a href="{% url "customers:profile" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Profile" %}</a></li>
        <li><a href="{% url "customers:alerts_index" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Alerts" %}</a></li>
        <li><a href="{% url "customers:messaging" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Messaging" %}</a></li>
        <li><a href="{% url "customers:requests" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Requests" %}</a></li>
        <li><a href="{% url "customers:documents" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Documents" %}</a></li>
        <li><a href="{% url "customers:logs" cust=customer.pk %}" class="unselectable" data-turbolinks="false">{% trans "Logs" %}</a></li>
        <li class="separator"></li>
        {% if customer.phone_1 %}
        <li class="phone">{{ customer.phone_1 }}</li>
        {% endif %}
        <li><a href="mailto:{{ user.email }}" data-turbolinks="false"><i class="material-icons">email</i> {{ user.email }}</a></li>
        <li><a href="{% url "customers:print" cust=customer.pk %}" class="unselectable" data-turbolinks="false" target="_blank"><i class="material-icons">printer</i> {% trans "Print" %}</a></li>
    </ul>
</div>

在row image中，我可以单击与Randy Senger相关联的按钮，该按钮在同一页面上打开一个小窗口，其中包含与enter image description here类似的不同选项。实际上，有一个clickable-row与此行关联。当我点击按钮时，问题就出现了。当我点击按钮时，它打开了小窗口大约两秒钟，它在另一个页面上呈现一点，就好像我在点击行一样。我想我可以在我的.js文件上使用preventDefault，这样当我点击按钮时，它就不会受到clickable-row的影响。有人知道我如何修改.js文件来解决这个问题吗？你知道吗

如果问题不清楚，请告诉我。你知道吗

---

这里的问题应该是什么？你知道吗

$(function(e){
    $(".clickable-row").on('click', function() {
        window.location = $(this).data("href");
    });
});

$(".customer-context-menu").on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
});

Answer 1

不幸的是，我对Python一无所知。但是，您的问题似乎是启动事件来包装DOM中的元素。这与事件冒泡有关。你知道吗

如果将事件绑定到父级和子级，则单击子级将触发这两个事件，除非指定事件应该执行的上下文。你知道吗

event.stopPropagation应该停止向父级通知事件处理。你知道吗

$('.child').on('click', function(){
    e.stopPropagation();
    console.log('only the child fires the event');
});

在任何情况下，您是否尝试检索jQuery事件的event.target？它应该根据您在父级中单击的位置而有所不同。你知道吗

<script>
    $('.clickable-row').on('click', function(event){
        // Every event returns an event object when specified as a callback parameter
        console.log(event.target);

        if ($(event.target).is('.my-class')){
            // Do code for specific clicked element
        }
    });
</script>

我真的希望这有帮助！你知道吗