#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0

    Click function doesn't work


    So, I have this function which creates a chat window:

    Code:
    function newChatWindow() {
        var $window = $("<div class = \"window\"></div>");
        var $nameCon = $("<div class = \"nameCon\"></div>");
        var $name = $("<div class = \"name\">" + names[nameNum] + "</div>");
        nameNum++;
        var $exit = $("<div class = \"exit\"></div>");
        var $exitText = $("<span class = \"exitText\">X</span>");
        var $textArea = $("<div class = \"textArea\"></div>");
        var $form = $("<form></form>");
        var $input = $("<input type = \"text\" class = \"input\" onkeydown = \"addText();\">");
        
        $("<p>Random Text</p>").appendTo($textArea);
        $name.appendTo($nameCon.appendTo($window.appendTo(".chats")));
        $exitText.appendTo($exit.appendTo($nameCon));
        $textArea.appendTo($window);
        $input.appendTo($form.appendTo($window));
    }
    This part works correctly.
    But, this function I made to close the window doesn't seem to work.
    Code:
    $(document).ready(function() {
    	newChatWindow();
        $(".exitText").click(function() {
           $(this).closest(".window").remove();
            newChatWindow();
            newChatWindow();
       /});
    });
    The odd thing is that I previously added in the chat window by doing it by HTML. The function works fine then, but not by using newChatWindow() to create it.

    Any help is appreciated... I can provide some other info if needed.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    I think you are going for something like this:
    Code:
    function newChatWindow() {
        var $window = $("body").append("<div class = \"window\"></div>");
        var $nameCon = $(".window").append("<div class = \"nameCon\"></div>");
        var $name = $(".window").append("<div class = \"name\">" + names[nameNum] + "</div>");
        nameNum++;
        var $exit = $(".window").append("<div class = \"exit\"></div>");
        var $exitText = $(".window").append("<span class = \"exitText\">X</span>");
        var $textArea = $(".window").append("<div class = \"textArea\"></div>");
        var $form = $(".window").append("<form></form>");
        var $input = $(".window").append("<input type = \"text\" class = \"input\" onkeydown = \"addText();\">");
        
        $("<p>Random Text</p>").appendTo($textArea);
        $name.appendTo($nameCon.appendTo($window.appendTo(".chats")));
        $exitText.appendTo($exit.appendTo($nameCon));
        $textArea.appendTo(".window");
        $input.appendTo($form.appendTo(".window"));
    }
    
    $(document).ready(function(){
    	newChatWindow();
        $(".exitText").click(function(){
           $(this).closest(".window").remove();
       });
    });
    I removed the last two calls of the newChatWindow() functions; from inside the $(".exitText").click() function. Because it was throwing the browser in "what seemed to be" an infinite loop; that was freezing up the browser. You might want to try using the newChatWindow() function; before your $(this).closest(".window").remove() function and see if it accomplishes, what your wanting to do; without freezing up the browser.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0
    Sorry, this didn't really do anything.

    And my goal was that every time someone tried to close a window, two more would appear lol
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Try this then; if the first one is closed, then two more will be created:
    Code:
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    
    var names = []; // for demo purposes
    var nameNum = 0; // for demo purposes
    
    function newChatWindow() 
     {
    $("#windowHolder").append("<div class = \"window\"></div>");
    $(".window").append("<div class = \"nameCon\"></div>");
    $(".window").append("<div class = \"name\">" + names[nameNum] + "</div>");
        nameNum++;
    $(".window").append("<div class = \"exit\"></div>");
    $(".window").append("<span class = \"exitText\">X</span>");
    $(".window").append("<div class = \"textArea\"></div>");
    $(".window").append("<form></form>");
    $(".window").append("<input type = \"text\" class = \"input\">");
    
        $(".exitText").click(function(){
           $(".window").eq(0).remove();
           $("#windowHolder").html("");
           newChatWindow();
           newChatWindow();
           $(".window").eq(1).remove();
       });
    
    }
    
    $(document).ready(function(){
       newChatWindow();
        $(".exitText").click(function(){
           $(".window").eq(0).remove();
           $("#windowHolder").html("");
           newChatWindow();
           newChatWindow();
           $(".window").eq(1).remove();
       });
    });
    
    </script>
    
    <div id="windowHolder"></div>
    Is that what you want or do you want it to double the amount, that appears, each time one is closed? By the way... that would be super freaking annoying lol.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0
    Wow thanks, this code works with closing the window. However, now the formatting is messing up with each click, so now I have a new problem to solve.

    And yes, I do want two to come up every time one is closed.

    THanks for your help.

IMN logo majestic logo threadwatch logo seochat tools logo