Как определить правильный селектор для вызова функции jquery?

Question

У меня есть два аккордеона (две формы) на странице, которые работают независимо (два вызова Ajax). Пользователь может что-то изменить в одном из них и сохранить его. Я собираюсь ограничить пользователей, поэтому всякий раз, когда они меняют что-то в одной из этих форм, они должны сохранять их, прежде чем вносить какие-либо изменения в другую форму. (Они не должны вносить изменения в оба без сохранения). Я использую следующий JS код:

$('#accordion1 *').click(function(event){ 
    if(model.dataChangedInAccordion2){ 
     // warning modal pops up 
    } 
}); 
$('#accordion2 *').click(function(event){ 
    if(model.dataChangedInAccordion1){ 
     // warning modal pops up 
    } 
}); 

но функция щелчок мыши не работает. Может ли кто-нибудь сказать мне, в чем проблема? Как будут селекторами? (в каждом аккордеоне много элементов)

Answer 1

Что делать, если пользователь вносит изменения в один аккордеон, но решает не сохранять их и не изменять вместо этого другого? Я думаю, вы должны сделать этот аккордеон только для чтения или не редактируемый. Затем добавьте кнопку для каждого аккордеона «edit». Таким образом, вы можете контролировать, что пользователь только модифицирует один аккордеон одновременно. То есть для части пользовательского интерфейса

Кроме того, как я уже сказал в комментариях, вам не нужно добавлять символ '*'. Распространение события click вызовет щелчок $('#accordion') всякий раз, когда вы нажимаете дочерний элемент аккордеона. Это для части JQuery.

-DEMO здесь https://jsfiddle.net/TCHdevlp/ce81oLwz/