This question already has an answer here:
I have a question regarding some Jquery functionality. I am creating a DIV element and then appending it to the DOM. When i try to bind the element with a .click function the $('#') does not bind to it. here is my CodePen The DOM element is being created on line 97 of the Javascript code. The .click funtion which i am attempting to bind to the element is on line 136.
Please Help ! Here is the JavaScript:
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "TeamSp00ky"],
fccstatus,
chstatus,
program,
game;
//function to check FCC status //
function fccStatus() {
$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?callback=?', function(fccdata) {
if (fccdata.stream === null) {
program = "Offline",
fccstatus = "offline";
} else {
program = fccdata.stream.game,
fccstatus = "online"
}
$.getJSON('https://api.twitch.tv/kraken/channels/freecodecamp?callback=?', function(fccdata1) {
var fcclogo = fccdata1.logo,
program = fccdata1.display_name,
name = fccdata1.display_name,
fccbanner = fccdata1.profile_banner,
description = fccdata1.status;
html = '<div style="background-image: url(' + fccbanner + ')" class="row ' +
fccstatus + '"><div class="col-xs-2 col-sm-1" id="icon"><img src="' +
fcclogo + '" class="logo"></div><div class="col-xs-10 col-sm-3" id="name"><a href="' +
fccdata1.url + '" target="_blank">' +
name + '</a></div><div class="col-xs-10 col-sm-8" id="streaming"><span class="hidden-xs">' +
description + '</span></div></div>';
$("#fcc").append(html);
});
})
};
//function to check channels status //
function channelInfo() {
channels.forEach(function(channel) {
$.getJSON('https://api.twitch.tv/kraken/streams/' + channel + '?callback=?', function(data) {
if (data.stream === null) {
game = "Offline";
chstatus = "offline";
} else if (data.stream === undefined) {
game = "Account Closed";
chstatus = "offline";
} else {
game = data.stream.game;
chstatus = "online";
};
})
$.getJSON('https://api.twitch.tv/kraken/channels/' + channel + '?callback=?', function(data2) {
var logo = data2.logo != null ? data2.logo : "http://img.pr.com/release-file/0810/111400/pat-doe-questionmark.jpg",
name = data2.display_name != null ? data2.display_name : channel,
banner = data2.profile_banner,
description = chstatus === "online" ? ': ' + data2.status : "";
html = '<div style="background-image: url(' + banner + ')" class="row ' +
chstatus + '" "><div class="col-xs-2 col-sm-1" id="icon"><img src="' +
logo + '" class="logo"></div><div class="col-xs-10 col-sm-3" id="name"><a href="' +
data2.url + '" target="_blank">' +
name + '</a></div><div class="col-xs-10 col-sm-8" id="streaming">' +
game + '<span class="hidden-xs">' +
description + '</span></div></div>';
chstatus === "online" ? $("#channels").prepend(html) : $("#channels").append(html);
})
})
};
//function to srarch & check//
function userStatus(){
var username = $("input").val();
if($.trim(username)!=''){
$.getJSON('https://api.twitch.tv/kraken/streams/' + username + '?callback=?', function(data) {
if (data.stream === null) {
game = "Offline";
chstatus = "offline";
} else if (data.stream === undefined || data.stream === 404) {
game = "Account Closed";
chstatus = "offline";
} else {
game = data.stream.game;
chstatus = "online";
};
})
$.getJSON('https://api.twitch.tv/kraken/channels/' + username + '?callback=?', function(data2) {
var logo = data2.logo != null ? data2.logo : "http://img.pr.com/release-file/0810/111400/pat-doe-questionmark.jpg",
name = data2.display_name != null ? data2.display_name : username,
banner = data2.profile_banner,
description = chstatus === "online" ? ': ' + data2.status : "";
html = '<div style="background-image: url(' + banner + ')" class="row ' +
chstatus + '" id="usearch"><div class="col-xs-2 col-sm-1" id="icon"><img src="' +
logo + '" class="logo"></div><div class="col-xs-10 col-sm-3" id="name"><a href="' +
data2.url + '" target="_blank">' +
name + '</a></div><div class="col-xs-10 col-sm-8" id="streaming">' +
game + '<span class="hidden-xs">' +
description + '</span></div></div>';
chstatus === "online" ? $("#search").prepend(html) : $("#search").append(html);
})
}
};
$(document).ready(function() {
fccStatus();
channelInfo();
$("form").submit(function(event) {
event.preventDefault();
userStatus();
this.reset();
})
// function containing status fliter all, online & offline //
$(".selector").click(function() {
$(".selector").removeClass("active");
$(this).addClass("active");
var status = $(this).attr('id');
if (status === "all") {
$(".online, .offline").removeClass("hidden");
} else if (status === "online") {
$(".online").removeClass("hidden");
$(".offline").addClass("hidden");
} else {
$(".offline").removeClass("hidden");
$(".online").addClass("hidden");
}
})
// usersearch element removal function //
$("#usearch").click(function() {
$(this).remove();
})
});$container: #e1e1e6;
$twitch: #6441a5;
$online: #00b000;
$header: #5c5457;
$Offline: #ae2029;
$grow: width 0.4s linear;
.offline {
color: $Offline;
a, a:focus, a:hover, a:visited {
color: $Offline;
}
}
.online {
color: $online;
a, a:focus, a:hover, a:visited {
color: $online;
}
}
.menu {
float: right;
margin: 10px auto;
max-width: 75px;
position: relative;
color: $header;
font-family: 'Oswald', sans-serif;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
#all {
.circle{
background-color: $twitch;
}
}
#online {
.circle {
background-color: $online;
}
}
#offline {
.circle {
background-color: $Offline;
}
}
.active, .selector:hover {
width: 80px !important;
transition: $grow;
cursor: pointer;
}
.selector {
line-height: 20px;
height: 20px;
background-color: $container;
padding: 0px 5px;
margin: 2px 0px;
width: 30px;
overflow: hidden;
float: right;
clear: right;
transition: $grow;
.circle {
height: 10px;
width: 10px;
border-radius: 50%;
background-color: $header;
border: 1px solid $header;
float: left;
margin: 5px 5px 5px 0px;
}
p {
float: right;
margin: 0px;
}
}
}
.img-responsive{
margin: 10px auto;
}
a, a:focus, a:hover, a:visited {
color: $online;
}
.container {
border: 3px solid $twitch;
padding: 25px 25px 10px 25px;
min-height: 900px;
background: black;
margin: 10px auto;
}
.logo {
max-width: 50px;
max-height: 50px;
border-radius: 50%;
border: 3px solid;
}
.row {
line-height: 45px;
margin: 0 auto;
padding: 5px;
border: 1px solid $twitch;
}
#name, #streaming {
line-height: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
#usearch {
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<img class="img-responsive center-block" src="http://s32.postimg.org/jnbda2mdh/twitch_logo.png" alt="" id="tl" />
</div>
<!--IMG DIV-->
<div class="menu">
<div class="selector active" id="all">
<div class="circle"></div>
<p>All</p>
</div>
<div class="selector" id="online">
<div class="circle"></div>
<p>Online</p>
</div>
<div class="selector" id="offline">
<div class="circle"></div>
<p>Offline</p>
</div>
</div>
<br />
<div class="text-center" id="us">
<form class="navbar-form" role="search" id="sf">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search For User" name="usersearch" id="us">
<div class="input-group-btn">
<button class="btn btn-default" id="btnclick" type="submit" data-toggle="#" onClick="return empty()"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<br />
<br />
<div class="col-md-12 center-block text-center" id="fcc"></div>
<br />
<div class="col-md-12 center-block text-center" id="search"></div>
<br />
<div class="col-md-12 center-block text-center" id="channels"></div>
</div>
<!--CONRAINER-->
</body>
Aucun commentaire:
Enregistrer un commentaire