クリッカブル行は

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"); 
    }); 
}); 

views.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ファイルがrow imageで

{% 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> 

のように見える、私はenter image description hereに似て、同じページ上の異なるオプションを持つ小さなウィンドウを開きRandy Sengerに関連するボタンをクリックすることができます。実際には、この行にはclickable-rowが関連付けられています。問題はボタンをクリックしたときに発生します。ボタンをクリックすると、小さなウィンドウが約2秒間開き、行をクリックしているかのように少し別のページにレンダリングされます。私はpreventDefaultを私の.jsファイルに使うことができると思うので、ボタンをクリックするとclickable-rowの影響を受けません。これを修正するために私の.jsファイルをどのように修正することができたのでしょうか？

P.S.質問が不明な場合はお知らせください。

---

ここで問題になるのは何ですか？

$(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> 

本当に助かりました。