3
나는 미디어 위키 확장 기능을 쓰는 중입니다. 나는 실제로 매우 초기 단계에있다.). 여기서 코드를 찾을 수 있습니다. (좋아요, 하나의 링크 만 제출할 수 있으니 github URL을 상상해보십시오)/eugenkiss/discussion-extension간단한 테스트 페이지의 이상한 Javascript 버그 (jQuery)
이상한 jQuery 문제가 있습니다. 방화 광 및 내 코드를 디버깅하려고합니다. 현재 코드와 예제를 업로드했습니다 : http://jsfiddle.net/NMpU5/
토론을 열고 적어도 두 개의 "답장"링크를 클릭하십시오. 그런 다음 나타나는 첫 번째 양식의 취소 버튼을 클릭하십시오. 이유는 모르겠지만 취소 버튼을 클릭하면 다른 양식이 원하는 양식 대신 닫힙니다.
이 내용도 다를 수 있습니다. 예를 들어, 두 개의 양식을 열고 마지막으로 열린 양식을 닫습니다. 처음에는 효과가있는 것 같습니다. 그러나 취소를 클릭하여 다른 양식을 닫으려고하면 은이 사라집니다. 그러나 이벤트는 방화범에 표시된 것처럼 트리거됩니다. 때로는 다른 응답 앵커를 클릭하면 다른 양식의 겉으로보기에는 작동하지 않는 취소 버튼을 클릭했을 때 많은 양식이 열릴 것입니다.
글쎄, 내 원하는 확장을 위해 나는 물론 열린 형태의 존재를 하나의 것으로 제한 할 수 있습니다 - 왜 다른 두 개 이상을 열어야합니까? 그러나 나는 벌써 그것을 발견하는데 많은 시간을 투자했기 때문에 망할 버그를 찾고 싶다! 내가 원하는 : 내가 jQuery를 1.4.2
$(document).ready(function() {
// Hide the discussion bodys per default
$(".discussion").addClass("closed")
.children(".discussion-body").hide();
// Register two custom events for the individual discussion divs
// "open" & "close" in order to make the discussion bodys
// collapsable and be able to toggle the events by clicking
// the "discussion-header-button" anchor
$(".discussion")
.bind("open", function(e) {
if(!$(this).hasClass("opened")) {
$(this).children(".discussion-body").slideDown();
$(this).find(".discussion-header-button").html("[-]");
$(this).addClass("opened");
$(this).removeClass("closed");
}
})
.bind("close", function(e) {
if(!$(this).hasClass("closed")) {
$(this).children(".discussion-body").slideUp();
$(this).find(".discussion-header-button").html("[+]");
$(this).addClass("closed");
$(this).removeClass("opened");
}
})
.find(".discussion-header-button").click(function(){
relatedDiscussion = $(this).parents(".discussion");
if(relatedDiscussion.hasClass("closed")) {
relatedDiscussion.trigger("open");
}
else if(relatedDiscussion.hasClass("opened")) {
relatedDiscussion.trigger("close");
}
});
// Register custom "showForm" & "destroyForm" events on posts
// in order to make the "Reply" button work
// TODO: Maybe add "preview" & "submit"
$(".discussion-body .post")
.bind({
showForm: function(){
post = $(this);
postBody = post.find(".post-body").first();
postHeader = post.find(".post-header").first();
postBody.append(postCommentFormHtml);
replyLink = postHeader.find(".reply");
replyLink.unbind();
form = postBody.find(".post-comment-form");
form.slideDown();
// create actions for the form buttons
form.find(".cancel").click(function(){
post.triggerHandler("destroyForm");
});
form.find(".preview").click(function(){
// Hier muss mit Ajax und der Datenbank gespielt
// werden um ein preview erstellen zu können
});
form.find(".submit").click(function(){
// Hier muss mit Ajax und der Datenbank gespielt
// werden um den Post abschicken zu können
});
},
destroyForm: function(){
post = $(this);
postBody = post.find(".post-body").first();
postHeader = post.find(".post-header").first();
replyLink = postHeader.find(".reply");
replyLink.click(replyAction);
form = postBody.find(".post-comment-form");
form.slideUp(function(){
$(this).remove();
});
}
});
//$(".discussion-post-comment").click(createPostCommentForm);
$(".discussion .reply").click(replyAction);
function replyAction(event){
// Note: It is important to use triggerHandler instead of trigger
// otherwise the "showForm" event of all parents is triggered
// recursively (bubbling) and this is not desired
event.preventDefault();
relatedPost = $(this).parents(".post").first();
relatedPost.triggerHandler("showForm");
}
});
postCommentFormHtml = "\
<div class='post-comment-form' style='display:none;'><br>\
<form action='textarea.htm'>\
<textarea name='post' cols='50' rows='8'></textarea>\
<br>\
<input class='submit' type='submit' value=' Post '>\
<input class='preview' type='submit' value=' Preview '>\
<input class='cancel'type='reset' value=' Cancel '>\
</form>\
</div>";
HTML을
<div class="discussion">
<div class="discussion-header">
<a class="discussion-header-button">[+]</a>
Diskussion: 3 Kommentar(e)
<a class="discussion-post-comment">Post Comment</a>
</div>
<div class="discussion-body">
<div class="post">
<div class="post-header">
<span class="post-header-name">Eugen</span>
<span class="post-header-date">2010-02-25 12:32:30</span>
<a class="reply" href="#">Reply</a>
<a class="edit" href="#">Edit</a>
<a class="delete" href="#">Delete</a>
</div>
<div class="post-body">
Ich denke das sollte anders sein!
</div>
<div class="post">
<div class="post-header">
<span class="post-header-name">Markus</span>
<span class="post-header-date">2010-02-25 12:32:31</span>
<a class="reply" href="#">Reply</a>
<a class="edit" href="#">Edit</a>
<a class="delete" href="#">Delete</a>
</div>
<div class="post-body">
Ich denke nicht
</div>
</div>
</div>
<div class="post">
<div class="post-header">
<span class="post-header-name">Jan</span>
<span class="post-header-date">2010-03-25 12:32:30</span>
<a class="reply" href="#">Reply</a>
<a class="edit" href="#">Edit</a>
<a class="delete" href="#">Delete</a>
</div>
<div class="post-body">
Mal was ganz anderes: Denkt ihr das selbe was ich denke?
</div>
</div>
</div>
</div>
편집 자바 스크립트
을 사용하고, BTW)
을, 그것은 당신이 알고, 나를 위해 귀중한 버그 클래스에 이드의 변경을 추가하는 것은 도움이되지 않았습니다. 그게 도움이된다면 : 나는 ("destroyForm"이벤트에서) "post"(그리고 "postbody") 변수가 실제로 잘못된 포스트를 가리키고 있기 때문에 잘못된 폼이 삭제된다는 (Firebug 사용) 것을 발견했습니다. 하지만 포스트 변수가 처음
Edit2가에서 잘못된 포스트 가리키는 왜 나를 넘어 : 클래스 http://jsfiddle.net/NMpU5/1/
에 ALLS ID를 변경
어쨌든 고유하도록 "id"값을 변경해야합니다. 이렇게하면 사람들이 도움을 줄 수 있습니다. 그렇듯이 디버깅할만한 가치가없는 것은 너무 잘못된 것입니다. – Pointy
ide를 디버그 용으로 사용하고 있습니까? –
나는 http://jsfiddle.net/NMpU5/1/을 만들었지 만 버그는 여전히 존재합니다. 클래스 대신에 id를 사용하여 새 버전의 stackoverflow에서 코드를 여기에서 업데이트해야합니까? – Eugen